html2canvas-无法识别object-fit属性的解决办法

1.正常利用object-fit进行图片剪切之后保存前后对比效果

1. 页面截图

2. 保存之后的图片

3. 图片标签结构和CSS属性

<img class="poster_image" :src='posterImage' alt="海报主题图片"/>

.poster_image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

2. 解决办法

解决办法比较简单，如果有更好的解决方法，欢迎分享

在img标签外面套一层div标签

<div class="poster_image_box">
  <img class="poster_image" :src="posterImage" alt="海报主题图片">
</div>

.poster_image_box {
  width: 100%;
  height: 160px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  .poster_image {
    width: 100%;
  }
}

以此达到一个看似剪切且不影响图片正常比例的效果，关键是保存图片后效果正常。

只是模仿一个cover效果。

如果有什么错误之处，望不吝赐教