Canvas toDataURL返回空值或损坏文件问题求助

看起来你遇到的问题主要来自两个小细节：绘画逻辑的缺陷，以及下载链接的处理方式不正确。咱们一步步来修正：

1. 绘画逻辑的核心问题 #

你当前的onmousemove事件只要鼠标移动就会触发绘制，而且没有调用beginPath()，这会导致两个麻烦：

• 鼠标没点击画布时，只要移动就会自动生成线条
• 路径会一直累积，时间长了Canvas的渲染会出现异常，甚至直接影响toDataURL生成的内容

修正思路：

• 添加鼠标按下/松开的事件，记录是否处于绘画状态
• 每次绘制前调用beginPath()，开启新的路径，避免路径无限累积

2. 下载链接的处理错误 #

你在download函数里把data:image/png替换成data:application/octet-stream是多余的操作——现代浏览器完全支持直接使用图片类型的Data URI配合download属性完成下载，这种替换反而可能导致浏览器无法正确解析数据，最终生成损坏的文件。

修正思路：

• 直接使用canvas.toDataURL("image/png")作为<a>标签的href值，不需要做字符串替换
• download属性可以直接在HTML里设置，没必要在函数里重复赋值

完整修正后的代码 #

<canvas id="c" width="800" height="600"></canvas>
<a href="" id="downloader" onclick="download()" download="image.png">Save</a>

<script type="text/javascript">
var el = document.getElementById('c');
var ctx = el.getContext('2d');
var isDrawing = false;

// 鼠标按下时标记为绘画状态，并定位画笔起点
el.addEventListener('mousedown', function(e) {
  isDrawing = true;
  ctx.moveTo(e.offsetX, e.offsetY);
});

// 鼠标松开时停止绘画
el.addEventListener('mouseup', function() {
  isDrawing = false;
});

// 鼠标移动时，仅在绘画状态下执行绘制
el.addEventListener('mousemove', function(e) {
  if (!isDrawing) return;
  
  ctx.lineWidth = 15;
  ctx.lineJoin = ctx.lineCap = 'round';
  ctx.strokeStyle = '#000000';
  
  ctx.beginPath(); // 开启新路径，避免路径累积
  ctx.moveTo(e.offsetX - 1, e.offsetY - 1); // 小技巧：避免起点终点重合导致无线条
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
});
</script>

<script type="text/javascript">
function download(){
  var canvas = document.getElementById("c");
  // 直接使用图片类型的Data URI作为下载链接
  document.getElementById("downloader").href = canvas.toDataURL("image/png");
}
</script>

额外优化说明 #

• 给Canvas添加了width和height属性，避免默认的300x150过小尺寸
• 使用offsetX/offsetY代替clientX/clientY，确保坐标是相对于Canvas本身的，而不是整个页面
• 绘制时的偏移小技巧，解决了起点终点重合导致无法画出线条的问题

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