利用 html2canvas && canvas 实现纯色背景图片抠图＜vue＞

1.  html中写好自己需要抠图的 img 元素图

<div id="poster">
  <img :src="poster" />
</div>

2. 抠图方法实现

methods:{
  getPoster(){ // 抠图方法
      const element = document.getElementById('poster'); 
      // 要捕获的HTML元素
      const backgroundColor = [255, 255, 255]; // 假设背景色为白色
      const tolerance = 50; // 容差值
      
      html2canvas(element).then(canvas => {

        // 获取Canvas的上下文
        const ctx = canvas.getContext('2d');
        // 获取Canvas的像素数据
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;


        // 遍历像素数据
        for (let i = 0; i < data.length; i += 4) {
          if (this.isWithinBackgroundColor(data, i, backgroundColor, tolerance)) {
            // 如果像素在背景色容差范围内，则设置为透明
            data[i + 3] = 0;
          }
        }

        // 将处理后的像素数据放回Canvas
        ctx.putImageData(imageData, 0, 0);
        // 将Canvas转换为图片并显示
        let dataURL = canvas.toDataURL("image/png");

        if (dataURL !== "") { // 下载
         // dataURL为生产好的base64图片 下载|| 直接使用都可
          var a = document.createElement('a')
          a.download = 'title';
          a.href = dataURL;
          a.click()
        }
      })
  },
  isWithinBackgroundColor(data, index, bgColor, tolerance) {
     const r = data[index];
     const g = data[index + 1];
     const b = data[index + 2];
     const a = data[index + 3];

     // 判断当前像素是否为纯背景色
     return (
      Math.abs(r - bgColor[0]) < tolerance &&
      Math.abs(g - bgColor[1]) < tolerance &&
      Math.abs(b - bgColor[2]) < tolerance &&
      a === 255
    );
  }
}

注： 抠图为设置好的颜色+-容差值进行每个像素点遍历判断，如果图片内容中有与设置好的颜色+-容差值一样的皆会被抠除！！！