如何将应用object-fit: cover的显示图片保存为Blob

要获取页面上经过object-fit: cover裁剪显示的图片Blob，核心思路是用Canvas模拟该裁剪效果，再将Canvas内容导出为Blob。下面是具体实现：

核心步骤 #

• 获取目标图片元素，计算object-fit: cover实际裁剪的区域参数
• 创建与图片容器尺寸一致的Canvas
• 在Canvas上按照裁剪规则绘制图片
• 将Canvas内容转换为Blob

Vue组件示例代码 #

<template>
  <div>
    <img 
      ref="targetImg" 
      :src="thumbnail" 
      :crossOrigin="thumbnail.startsWith('http') ? 'anonymous' : ''"
      style="height: 165px; width: 290px; object-fit: cover;"
    >
    <button @click="captureCroppedImage">保存裁剪后图片</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      thumbnail: '你的图片地址'
    }
  },
  methods: {
    async captureCroppedImage() {
      const imgEl = this.$refs.targetImg;
      // 等待图片完全加载
      if (!imgEl.complete) {
        await new Promise(resolve => imgEl.onload = resolve);
      }

      const containerW = imgEl.offsetWidth;
      const containerH = imgEl.offsetHeight;
      const imgW = imgEl.naturalWidth;
      const imgH = imgEl.naturalHeight;

      // 计算object-fit: cover的缩放比例与偏移量
      const scale = Math.max(containerW / imgW, containerH / imgH);
      const drawW = imgW * scale;
      const drawH = imgH * scale;
      const offsetX = (containerW - drawW) / 2;
      const offsetY = (containerH - drawH) / 2;

      // 创建Canvas并绘制裁剪后的图片
      const canvas = document.createElement('canvas');
      canvas.width = containerW;
      canvas.height = containerH;
      const ctx = canvas.getContext('2d');
      
      ctx.drawImage(
        imgEl,
        0, 0, imgW, imgH, // 原图绘制区域（完整原图）
        offsetX, offsetY, drawW, drawH // Canvas上的定位与尺寸
      );

      // 转换为Blob并处理（示例为下载图片）
      canvas.toBlob(blob => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'cropped-img.png';
        a.click();
        URL.revokeObjectURL(url);
      }, 'image/png');
    }
  }
}
</script>

注意事项 #

• 如果图片是跨域资源，必须给img元素添加crossOrigin="anonymous"，同时确保图片服务器配置了CORS允许你的域名访问
• 必须等待图片完全加载后再执行捕获逻辑，否则会出现Canvas绘制空白的问题

内容的提问来源于stack exchange，提问作者Federico di Geronimo