toDataURL()返回空字符串或黑图基本是canvas被跨域污染所致，需同时满足img.crossOrigin="anonymous"和服务端返回Access-Control-Allow-Origin响应头，且本地开发必须使用HTTP服务而非file://协议。
toDataURL() 返回空字符串或黑图，基本就是 canvas 被污染了
调用 canvas.toDataURL() 得到 "data:," 或纯黑图像，不是代码写错了，而是浏览器已禁止读取像素——只要 drawImage 过一张没配 CORS 的跨域图片（哪怕只是本地 file:// 加载同目录 PNG），canvas 就被标记为“污染”状态。
- 验证方法：控制台直接输入
canvas.toDataURL()，返回极短字符串就可锁定污染 - 修复必须同时满足两个条件：
Access-Control-Allow-Origin: *（或具体域名） -
file://协议下永远触发跨域限制，本地开发务必起 HTTP 服务，例如python3 -m http.server或npx http-server - 若第三方图片无法配 CORS，只能代理到同源接口再加载，不能绕过
导出 PNG/JPEG/WebP 时的参数和格式陷阱
toDataURL() 默认输出 image/png，但传参稍有偏差就会静默失效或降级。
- PNG 不接受质量参数：
canvas.toDataURL("image/png", 0.9)中的0.9会被忽略，只认 MIME 类型 - JPEG 必须传小数质量值（0.0–1.0）：
canvas.toDataURL("image/jpeg", 0.85)合法；0.8555、85、"0.85"全部无效 - WebP 支持透明且压缩率高，但 Safari 16.4 之前不支持，可用检测兜底：
canvas.toDataURL("image/webp").indexOf("data:image/webp") === 0 - JPEG 不支持 alpha，透明区域会变黑——导出前需手动填白底：
ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, canvas.width, canvas.height);
点击下载却打不开图片？download 属性没配对
toDataURL() 只生成 data URL 字符串，不会自动触发下载。用 window.location.href = dataUrl 在多数浏览器里会跳转打开，而不是下载。
- 正确做法：创建
元素，设href为 data URL，download属性指定文件名（如"chart.png"） - 必须把该
添加进 DOM（例如document.body.appendChild(link)），再调用link.click() - 点击后立即移除：
document.body.removeChild(link)，否则 DOM 泄漏累积影响性能 - 注意：Safari 对
download属性支持较晚（10.1+），iOS 上仍可能仅打开而非下载
大画布导出卡死或崩溃？别硬扛，优先换 toBlob
当 canvas.width × canvas.height > ~10M 像素（比如 4000×3000），toDataURL() 生成的 Base64 字符串太长，Chrome 可能崩溃，Safari 可能拒绝解析。
- 临时缓解：用
setTimeout(() => { canvas.toDataURL(...) }, 0)把调用丢进微任务队列，避免阻塞 UI - 根本方案：导出前缩放画布（如
scale = 0.5），重绘到新 canvas 再导出 - 更优替代：
canvas.toBlob(callback, "image/jpeg", 0.85)+URL.createObjectURL()，不走 Base64，内存占用低、兼容性好 - IE11 不支持
download，需检测window.navigator.msSaveBlob并 fallback 使用
真实场景里最容易被忽略的，是 canvas 尺寸与 CSS 缩放分离——只用 CSS 改 canvas 显示大小，canvas.width 和 canvas.height 没同步设置，会导致导出图糊、裁切或比例错乱。这个坑没法靠 toDataURL 参数补救，得从绘制源头 fix。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
