如何缩小显示Canvas，却用toDataURL下载原尺寸PNG？

核心思路 #

不要修改Canvas的width/height属性（这是绘图缓冲区的实际尺寸，直接决定toDataURL导出的图像大小），仅通过CSS样式控制Canvas在页面上的显示尺寸。这样既能在页面上以50%比例展示，又能保留原尺寸的绘图数据用于下载。

具体实现步骤 #

1. 固定绘图缓冲区尺寸：保持Canvas的width和height属性为原尺寸100px×100px：

   <canvas id="canvas" width="100" height="100"></canvas>
   

2. CSS控制显示大小：通过样式将Canvas元素的显示尺寸设为50px×50px：

   #canvas {
     width: 50px;
     height: 50px;
   }
   

3. Fabric.js适配（若使用）：无需调用setZoom()缩放画布，直接按上述方式设置Canvas的CSS样式即可。Fabric.js会基于Canvas的width/height属性进行原尺寸渲染，导出时自然生成100×100px的图像。

下载逻辑示例 #

function downloadCanvas() {
  const canvas = document.getElementById('canvas');
  const dataURL = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.href = dataURL;
  link.download = 'canvas-image.png';
  link.click();
}

点击下载按钮时，toDataURL会基于Canvas的100×100px绘图缓冲区生成原尺寸PNG，而页面上显示的是缩小后的50×50px元素。

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