JavaScript保存Canvas为文件问题：下载图片空白但页面显示正常

这种Canvas下载空白的坑我踩过好多次！你说用document.write输出img能正常显示还能下载，说明Canvas本身的绘制和dataURL生成是没问题的，问题肯定出在你创建下载链接的代码没写全或者细节没处理好。

先给你补全并修正正确的保存代码：

function saveFile() {
  // 先拿到Canvas元素
  const canvas = document.getElementById("canvas");
  // 这里可以加个保险：确保Canvas绘制完成（如果是异步绘制的话，比如用了requestAnimationFrame或者加载图片后绘制，要等这些操作结束再调用saveFile）
  const imageDataUrl = canvas.toDataURL("image/png");

  const downloadLink = document.createElement("a");
  // 把dataURL赋值给链接的href
  downloadLink.href = imageDataUrl;
  // 设置下载的文件名，这个很重要，不然浏览器可能会用默认的奇怪文件名
  downloadLink.download = "my-canvas-art.png";
  
  // 关键步骤：有些浏览器要求链接必须在DOM里才能触发下载，所以临时添加到页面
  document.body.appendChild(downloadLink);
  // 触发点击事件
  downloadLink.click();
  // 下载完成后把临时链接删掉，避免DOM冗余
  document.body.removeChild(downloadLink);
}

为什么之前的document.write方式有效？因为当你把dataURL放到img标签里，浏览器会完整加载这个图片资源，右键下载的时候是直接处理已经渲染好的img内容。而你之前的代码只创建了a标签，但没设置download属性，也没触发点击，甚至可能没把链接加到DOM里，自然下载不了正确的文件。

另外还有个容易忽略的点：检查你的Canvas元素的width和height属性！很多人会用CSS设置Canvas的显示尺寸，但忘了设置Canvas本身的像素尺寸，导致绘制的内容被缩放，保存的时候就会出现空白或者内容偏移。比如：

<!-- 正确的写法：属性width/height是实际像素尺寸，CSS的width/height是显示尺寸 -->
<canvas id="canvas" width="800" height="600" style="width: 400px; height: 300px;"></canvas>

如果你的Canvas是动态绘制的（比如加载外部图片后绘制），还要确保在绘制完成后再调用saveFile，比如在图片的onload回调里触发保存，不然toDataURL可能会获取到未绘制完成的空白Canvas。

试试上面的代码，应该就能解决空白下载的问题了！

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