如何在使用putImageData时正确实现透明叠加效果？

为什么没有叠加效果？ #

putImageData的作用是直接替换canvas上的像素数据，它完全绕过了canvas的合成机制（包括Alpha混合、全局合成模式等）。你两次绘制的半透明红色块，重叠区域的像素会被第二次的putImageData直接覆盖，而不是和原有像素做Alpha叠加，所以看不到你想要的混合效果。

解决方法 #

方法1：用drawImage代替putImageData

把ImageData转换成临时Canvas对象，再通过drawImage绘制，这样会自动应用canvas的Alpha合成规则，实现叠加效果：

const arr = new Uint8ClampedArray(4*100*100);

for (let i = 0; i < arr.length; i += 4) {
  arr[i + 0] = 255;
  arr[i + 1] = 0;
  arr[i + 2] = 0;
  arr[i + 3] = 100;
}

let imageData = new ImageData(arr, 100);

// 创建临时canvas承载ImageData
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
tempCanvas.width = imageData.width;
tempCanvas.height = imageData.height;
tempCtx.putImageData(imageData, 0, 0);

// 使用drawImage绘制，自动实现Alpha叠加
context.drawImage(tempCanvas, 0, 0);
context.drawImage(tempCanvas, 50, 50);

方法2：手动计算像素叠加

如果需要自定义合成逻辑，可以手动获取canvas当前的像素数据，和新的图像数据做Alpha混合计算后再写入：

const arr = new Uint8ClampedArray(4*100*100);

for (let i = 0; i < arr.length; i += 4) {
  arr[i + 0] = 255;
  arr[i + 1] = 0;
  arr[i + 2] = 0;
  arr[i + 3] = 100;
}

let imageData = new ImageData(arr, 100);

// 先绘制第一个图像
context.putImageData(imageData, 0, 0);

// 获取重叠区域的当前像素数据
const targetData = context.getImageData(50, 50, imageData.width, imageData.height);
const targetArr = targetData.data;
const sourceArr = imageData.data;

// 手动计算Alpha混合（遵循标准Alpha合成公式）
for (let i = 0; i < sourceArr.length; i += 4) {
  const srcAlpha = sourceArr[i+3] / 255;
  const dstAlpha = targetArr[i+3] / 255;
  
  // 计算最终透明度
  const finalAlpha = srcAlpha + dstAlpha * (1 - srcAlpha);
  
  // 计算RGB通道的混合值
  targetArr[i] = Math.round((sourceArr[i] * srcAlpha + targetArr[i] * dstAlpha * (1 - srcAlpha)) / finalAlpha);
  targetArr[i+1] = Math.round((sourceArr[i+1] * srcAlpha + targetArr[i+1] * dstAlpha * (1 - srcAlpha)) / finalAlpha);
  targetArr[i+2] = Math.round((sourceArr[i+2] * srcAlpha + targetArr[i+2] * dstAlpha * (1 - srcAlpha)) / finalAlpha);
  targetArr[i+3] = Math.round(finalAlpha * 255);
}

// 写入混合后的像素数据
context.putImageData(targetData, 50, 50);

日常场景中推荐用方法1，简洁高效；方法2适合需要定制合成逻辑的特殊需求。

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