求助：使用Canvas的drawImage与putImageData后PNG透明背景变黑

问题原因 #

问题出在getImageData与putImageData的使用流程中：

1. 初始创建的大画布（safeArea）里，图片未覆盖的区域像素值为rgba(0,0,0,0)（透明黑色）
2. getImageData会获取整个大画布的像素数据，这些透明黑色像素也会被包含在内
3. 重置画布尺寸为裁剪大小后，putImageData将大画布的像素数据绘制到新画布，此时裁剪区域内的透明区域实际是rgba(0,0,0,0)，在部分渲染环境或导出流程中，这类像素会被显示为黑色

另外，putImageData是直接操作像素数据，不会应用Canvas的合成规则，无法自动保留原始图片的透明特性。

解决方案 #

改用drawImage直接完成裁剪操作，避免使用getImageData和putImageData，这样能正确保留透明背景。修改后的代码如下：

const createImage = (url) =>
  new Promise((resolve, reject) => {
    const image = new Image();
    image.addEventListener("load", () => resolve(image));
    image.addEventListener("error", (error) => reject(error));
    image.setAttribute("crossOrigin", "anonymous");
    image.src = url;
  });

function getRadianAngle(degreeValue) {
  return (degreeValue * Math.PI) / 180;
}

export default async function getCroppedImg(imageSrc, pixelCrop, rotation = 0) {
  const image = await createImage(imageSrc);
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  const maxSize = Math.max(image.width, image.height);
  const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2));

  // 绘制旋转后的图片到大画布
  canvas.width = safeArea;
  canvas.height = safeArea;

  ctx.translate(safeArea / 2, safeArea / 2);
  ctx.rotate(getRadianAngle(rotation));
  ctx.translate(-safeArea / 2, -safeArea / 2);

  // 确保画布初始为透明
  ctx.clearRect(0, 0, safeArea, safeArea);
  ctx.drawImage(
    image,
    safeArea / 2 - image.width * 0.5,
    safeArea / 2 - image.height * 0.5
  );

  // 创建裁剪尺寸的画布，直接截取目标区域
  const cropCanvas = document.createElement("canvas");
  const cropCtx = cropCanvas.getContext("2d");
  cropCanvas.width = pixelCrop.width;
  cropCanvas.height = pixelCrop.height;

  cropCtx.drawImage(
    canvas,
    pixelCrop.x,
    pixelCrop.y,
    pixelCrop.width,
    pixelCrop.height,
    0,
    0,
    pixelCrop.width,
    pixelCrop.height
  );

  return cropCanvas;
}

修改说明 #

1. 新增专门的裁剪画布cropCanvas，避免重置原画布尺寸导致的像素污染
2. 使用drawImage的裁剪参数直接从旋转后的大画布截取目标区域，完整保留原始图片的透明通道
3. 添加ctx.clearRect确保初始大画布为透明，消除潜在的异常像素影响

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