Canvas裁剪图片修改背景色问题：背景始终为黑色而非白色

核心问题分析 #

你的代码里存在三个关键问题导致背景始终是黑色：

• 未设置Canvas的宽高：创建的canvas默认尺寸很小，后续drawImage的目标区域超出默认尺寸，超出部分会是透明状态，而JPEG格式不支持透明，会自动将透明区域转为黑色。
• ctx.fill()未指定填充范围：fill()默认只填充当前路径，你没有创建路径的话等于没执行填充操作，实际画布还是透明的。
• JPEG格式的透明处理特性：即使正确填充了白色，若原图存在透明区域，导出JPEG时透明部分也会被转为黑色（JPEG不支持alpha通道）。

修复后的代码 #

const image = await createImage(imageSrc);
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

if (!ctx) {
  return null;
}

// 设置canvas实际尺寸，匹配绘制的目标区域大小
canvas.width = 560; // 60（目标x偏移） + 500（目标宽度）
canvas.height = 360; // 60（目标y偏移） + 300（目标高度）

// 填充整个画布为白色
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制裁剪后的图片
ctx.drawImage(image, 150, 200, 500, 300, 60, 60, 500, 300);

return new Promise((resolve, reject) => {
  canvas.toBlob((file) => {
    if (!file) {
      reject(new Error('Failed to create blob'));
      return;
    }
    file.name = 'cropped.jpeg';
    resolve({ file: file, url: URL.createObjectURL(file) });
  }, 'image/jpeg');
});

额外说明 #

• 如果原图有透明区域且希望保留透明效果，建议导出为image/png格式，PNG支持alpha通道。
• 确保createImage函数正确加载图片，若图片来自其他域名，需要设置image.crossOrigin = 'anonymous'避免跨域绘制异常。

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