Canvas缩放/还原精度问题：多次缩放后无法恢复原尺寸

对Canvas执行多次缩放操作，再执行相同次数的还原操作后，无法精确回到原始尺寸。比如1次放大加1次缩小的测试：

console.log(bgImageCanvas.width); // 原始尺寸: 300
console.log(bgImageCanvas.width*1.1); // 放大后: 330
console.log(bgImageCanvas.width*.9); // 缩小后: 270（期望是300）

这并非Bug，但行为不符合预期。

我的缩放函数代码如下：

function zoomBgImage(callBtn) {
  let tempCanvas = createTmpCanvas(bgImageCanvas.width, bgImageCanvas.height);
  let tctx = tempCanvas.getContext("2d")
  let zoomAmount, newZoom;
  
  tctx.drawImage(bgImageCanvas, 0, 0);
  bgImagectx.clearRect(0, 0, bgImageCanvas.width, bgImageCanvas.height);
  bgImagectx.save();

  if (callBtn == "zoomIn") {
    zoomAmount = zoomInAmount;
    newZoom = currentZoom + zoomIncrement;
  } else {
    zoomAmount = zoomOutAmount;
    newZoom = currentZoom - zoomIncrement;
  }

  bgImageCanvas.width = bgImageCanvas.width * zoomAmount;
  bgImageCanvas.height = bgImageCanvas.height * zoomAmount;
  bgImagectx.scale(newZoom, newZoom);
  bgImagectx.translate(panX, panY);
  bgImagectx.drawImage(tempCanvas, 0, 0);
  bgImagectx.restore();
}

问题原因 #

1. 基于当前尺寸迭代缩放：每次缩放都修改Canvas的当前尺寸，再基于修改后的值计算下一次尺寸，比如300×1.1=330，330×0.9=297（示例中270应为笔误），自然无法回到原始值。
2. 缩放比例维护逻辑错误：用currentZoom + zoomIncrement这种线性加减方式，和乘法缩放的逻辑不匹配，导致缩放比例混乱。
3. 从缩放后的Canvas复制图像：每次缩放都从当前Canvas复制到临时画布，会导致图像质量逐次损失，进一步加剧尺寸和显示的偏差。

解决方法 #

核心思路 #

• 保存原始尺寸和原始图像，所有缩放操作都基于原始基准计算，避免迭代误差。
• 用乘法维护缩放比例，保证放大和缩小的可逆性。

修改后的示例代码 #

// 初始化时保存原始尺寸和原始图像
const originalCanvasWidth = bgImageCanvas.width;
const originalCanvasHeight = bgImageCanvas.height;
const originalBgImage = new Image();
originalBgImage.src = bgImageCanvas.toDataURL(); // 或直接用初始加载的图像源

let currentZoom = 1; // 初始缩放比例为1
const zoomRatio = 1.1; // 每次缩放的比例（放大×1.1，缩小÷1.1）

function zoomBgImage(callBtn) {
  // 更新缩放比例
  if (callBtn === "zoomIn") {
    currentZoom *= zoomRatio;
  } else {
    currentZoom /= zoomRatio;
    // 可添加最小缩放限制，防止缩放过小
    currentZoom = Math.max(currentZoom, 0.2);
  }

  // 基于原始尺寸和当前缩放比例设置Canvas大小
  bgImageCanvas.width = originalCanvasWidth * currentZoom;
  bgImageCanvas.height = originalCanvasHeight * currentZoom;

  const ctx = bgImageCanvas.getContext("2d");
  ctx.clearRect(0, 0, bgImageCanvas.width, bgImageCanvas.height);

  // 绘制原始图像到缩放后的Canvas
  ctx.drawImage(originalBgImage, 0, 0, bgImageCanvas.width, bgImageCanvas.height);
}

额外说明 #

• 如果需要支持平移（pan），可以在绘制时结合平移坐标，但需保证平移逻辑也基于原始基准或当前缩放比例计算，避免偏移累积。
• 始终使用原始图像源绘制，避免反复从缩放后的Canvas复制，能保证图像质量不会随着缩放次数下降。

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