如何在Canvas中获取带透明背景的图像蒙版？

方法一：像素级精准处理 #

适合需要自定义背景识别规则的场景，直接操作图像像素实现蒙版：

• 1. 加载原始图像，注意处理跨域问题（外域图需设置crossOrigin）
• 2. 将图像绘制到Canvas，获取ImageData对象读取像素信息
• 3. 遍历像素，根据背景色阈值设置对应区域的透明度为0
• 4. 将修改后的像素数据放回Canvas，导出蒙版图像

示例代码：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.crossOrigin = 'anonymous';
img.src = '原始图像路径';
img.onload = () => {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  
  // 以白色背景为例，可根据实际背景调整颜色阈值
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i+1];
    const b = data[i+2];
    // 判断为背景色时，将alpha通道设为0（完全透明）
    if (r > 240 && g > 240 && b > 240) {
      data[i+3] = 0;
    }
  }
  
  ctx.putImageData(imageData, 0, 0);
  // 导出蒙版为base64格式，可直接用于img标签或下载
  const maskUrl = canvas.toDataURL('image/png');
  console.log(maskUrl);
};

方法二：合成模式快速实现 #

如果已有现成的遮罩图，用Canvas合成模式更简洁：

• 1. 同时加载原始图像和遮罩图像
• 2. 先绘制原始图像到Canvas
• 3. 设置合成模式为destination-in（仅保留遮罩与原图重叠的区域）
• 4. 绘制遮罩图像，恢复默认合成模式后导出蒙版

示例代码：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const originalImg = new Image();
const maskImg = new Image();

let loadedCount = 0;
const onAllLoaded = () => {
  loadedCount++;
  if (loadedCount === 2) {
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    // 先绘制原始图像
    ctx.drawImage(originalImg, 0, 0);
    // 设置合成规则：只保留遮罩覆盖的区域
    ctx.globalCompositeOperation = 'destination-in';
    // 绘制遮罩图
    ctx.drawImage(maskImg, 0, 0);
    // 恢复默认合成模式
    ctx.globalCompositeOperation = 'source-over';
    // 导出蒙版
    const maskUrl = canvas.toDataURL('image/png');
    console.log(maskUrl);
  }
};

originalImg.crossOrigin = 'anonymous';
originalImg.src = '原始图像路径';
originalImg.onload = onAllLoaded;

maskImg.crossOrigin = 'anonymous';
maskImg.src = '遮罩图像路径';
maskImg.onload = onAllLoaded;

为什么xor模式无效？ #

xor的作用是只显示两张图像不重叠的区域，重叠部分会变为透明，这和你需要“保留目标区域、背景透明”的需求完全相反，所以无法得到想要的蒙版效果。

内容的提问来源于stack exchange，提问作者Dmytro