Canvas图像旋转后边角被裁剪的JavaScript技术求助

我明白你遇到的困扰了——每次旋转45度，图像的边角就被切掉，还得受限于不能访问原始图像、必须保持Canvas尺寸和原图一致这些条件。咱们来一步步搞定这个问题：

问题根源 #

当你旋转图像时，旋转后的图像外接矩形的尺寸会比原Canvas的宽高大（比如45度旋转后，这个外接矩形的宽高等于原图的对角线长度）。直接在原Canvas上绘制旋转后的内容，超出边界的部分自然会被裁剪掉。因为你只能基于当前Canvas的内容操作，所以咱们需要用一个临时Canvas来过渡处理。

解决方案代码 #

修改你的rotateImage函数，用临时Canvas先绘制完整的旋转图像，再缩放到原Canvas尺寸内：

function rotateImage() {
  const w = ctx.canvas.width;
  const h = ctx.canvas.height;
  // 计算旋转后完整图像需要的最小尺寸（原图的对角线长度）
  const diagonal = Math.sqrt(w * w + h * h);
  // 创建临时Canvas
  const tempCanvas = document.createElement('canvas');
  const tempCtx = tempCanvas.getContext('2d');
  tempCanvas.width = diagonal;
  tempCanvas.height = diagonal;

  // 在临时Canvas上绘制旋转后的完整图像
  tempCtx.save();
  // 平移到临时Canvas的中心
  tempCtx.translate(diagonal / 2, diagonal / 2);
  tempCtx.rotate((Math.PI / 180) * -45); // 保持你原来的左旋转45度方向
  // 把原Canvas的内容绘制到临时Canvas的中心，确保完整显示
  tempCtx.drawImage(ctx.canvas, -w / 2, -h / 2);
  tempCtx.restore();

  // 清空原Canvas
  ctx.clearRect(0, 0, w, h);
  // 计算缩放比例，让旋转后的图像能完整放进原Canvas
  const scale = Math.min(w / diagonal, h / diagonal);
  const scaledWidth = diagonal * scale;
  const scaledHeight = diagonal * scale;
  // 将临时Canvas的内容缩放到原Canvas并居中
  ctx.drawImage(tempCanvas, (w - scaledWidth) / 2, (h - scaledHeight) / 2, scaledWidth, scaledHeight);
}

关键改动解释 #

1. 临时Canvas的尺寸：用原图的对角线长度作为临时Canvas的宽高，这样能完全容纳旋转后的图像，不会有任何裁剪。
2. 旋转绘制到临时Canvas：把原Canvas的内容平移到临时Canvas中心后旋转，确保旋转后的图像完整落在临时Canvas范围内。
3. 缩放回原Canvas：计算合适的缩放比例，让旋转后的图像刚好能放进原Canvas的尺寸里，同时居中显示——既满足了Canvas尺寸不变的要求，又能完整展示旋转后的图像。
4. 清除原Canvas内容：在绘制新内容前清空原Canvas，避免残留之前的图像痕迹。

额外优化提示 #

你的HTML里给#imageCanvas设置了CSS的width:350px; height:250px，但JS里在handleImage函数中已经把Canvas的绘图缓冲区尺寸（canvas.width和canvas.height）设置成了原图的尺寸，这会导致图像拉伸。如果要让Canvas显示和绘图缓冲区一致的大小，建议用JS动态设置CSS尺寸：

preview.onload = function() {
  canvas.width = preview.width;
  canvas.height = preview.height;
  // 动态设置CSS尺寸，避免图像拉伸
  canvas.style.width = `${preview.width}px`;
  canvas.style.height = `${preview.height}px`;
  canvas.getContext('2d').drawImage(preview, 0, 0);
};

这样修改后，每次旋转图像都能完整显示在原尺寸的Canvas里，不会再出现边角被裁剪的问题了。

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