Canvas图片裁剪导出空白未填充，如何在图像后方绘制填充？

问题根源 #

浏览器预览时，Canvas通过objectFit: contain样式自动缩放实际内容适配300x300的显示容器，视觉上裁剪结果正常。但导出Blob时，是基于Canvas的实际像素尺寸（由canvas.width和canvas.height定义）生成图片，当前代码未考虑旋转对图像边界的影响，导致Canvas尺寸与旋转后图像不匹配，绘制位置偏移，最终导出出现空白。

具体错误点 #

• Canvas尺寸未适配旋转后的图像边界：按原始crop区域尺寸设置Canvas宽高，旋转（尤其是非90度倍数旋转）后图像外接矩形尺寸变大，原Canvas无法完全容纳裁剪区域，出现空白或裁切。
• 变换顺序错误：先平移到裁剪原点再执行旋转等操作，导致旋转后的图像无法对齐Canvas左上角，留下空白区域。

修复步骤 #

1. 计算旋转后的Canvas适配尺寸 #

旋转后图像的外接矩形宽高会变化，需重新计算Canvas尺寸以完全容纳裁剪区域：

const TO_RADIANS = Math.PI / 180;

export async function canvasPreview(image, canvas, crop, scale = 1, rotate = 0) {
  const ctx = canvas.getContext('2d');
  if (!ctx) throw new Error('No 2d context');

  const scaleX = image.naturalWidth / image.width;
  const scaleY = image.naturalHeight / image.height;
  const pixelRatio = window.devicePixelRatio;
  const rotateRads = rotate * TO_RADIANS;

  // 计算旋转后图像的外接矩形宽高
  const rotatedWidth = Math.abs(image.naturalWidth * Math.cos(rotateRads)) + Math.abs(image.naturalHeight * Math.sin(rotateRads));
  const rotatedHeight = Math.abs(image.naturalHeight * Math.cos(rotateRads)) + Math.abs(image.naturalWidth * Math.sin(rotateRads));

  // 基于旋转后的尺寸和crop比例设置Canvas实际像素尺寸
  const cropScaleX = crop.width * scaleX / image.naturalWidth;
  const cropScaleY = crop.height * scaleY / image.naturalHeight;
  canvas.width = Math.floor(rotatedWidth * cropScaleX * pixelRatio);
  canvas.height = Math.floor(rotatedHeight * cropScaleY * pixelRatio);

  ctx.scale(pixelRatio, pixelRatio);
  ctx.imageSmoothingQuality = 'high';

  const cropX = crop.x * scaleX;
  const cropY = crop.y * scaleY;
  const centerX = image.naturalWidth / 2;
  const centerY = image.naturalHeight / 2;

  // 可选：填充背景色，避免透明空白
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, canvas.width / pixelRatio, canvas.height / pixelRatio);

  ctx.save();

  // 调整变换顺序：先对齐中心旋转，再平移到裁剪区域
  ctx.translate(canvas.width / pixelRatio / 2, canvas.height / pixelRatio / 2);
  ctx.rotate(rotateRads);
  ctx.scale(scale, scale);
  ctx.translate(-centerX, -centerY);
  ctx.translate(-cropX, -cropY);

  ctx.drawImage(
    image,
    0, 0, image.naturalWidth, image.naturalHeight,
    0, 0, image.naturalWidth, image.naturalHeight
  );

  ctx.restore();
}

2. 调整变换顺序 #

将变换顺序改为：平移Canvas原点到中心 → 旋转 → 缩放 → 平移图像到中心 → 平移到裁剪区域，确保旋转后的图像始终对齐Canvas的可视区域。

3. （可选）填充Canvas背景 #

如果需要空白区域显示纯色（如白色），添加fillRect绘制背景，避免导出图片出现透明空白。

验证效果 #

修改后，Canvas实际尺寸会适配旋转后的裁剪区域，绘制位置精准对齐，导出的Blob图片与浏览器预览效果完全一致，无空白区域。

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