canvas被污染导致todataurl()返回空字符串或黑图；需服务端配置access-control-allow-origin响应头，前端img设crossorigin="anonymous"，且本地开发必须用http服务而非file://协议。
toDataURL() 返回空字符串或黑图，基本就是 canvas 被污染了
调用 canvas.toDataURL() 得到 "data:," 或纯黑图像，90% 以上是跨域污染导致的静默失败——不是代码写错了，而是浏览器直接禁止读取像素。
验证方式很简单：打开控制台，直接输入 canvas.toDataURL()，如果返回极短字符串（比如只有 "data:,"），基本可以锁定污染。
- 必须服务端响应头包含
Access-Control-Allow-Origin: *（或明确域名） - 前端加载图片时，
<img>标签要加crossorigin="anonymous"属性，或 JS 创建时显式设置img.crossOrigin = "anonymous" -
file://协议下永远触发跨域限制，本地开发务必起 HTTP 服务（如python3 -m http.server）
导出 PNG 还是 JPEG？type 和 quality 参数别传错
toDataURL() 默认输出 image/png，无损、保透明，但体积大；JPEG 压缩率高，但不支持 alpha 通道——透明区域会变成黑底。
- 导出 PNG：
canvas.toDataURL("image/png")，不接受第二个参数，传了也忽略 - 导出 JPEG：
canvas.toDataURL("image/jpeg", 0.85)，第二个参数必须是 0–1 的小数（0.85表示 85% 质量），传85或0.8555都会被忽略 - 导出 WebP：
canvas.toDataURL("image/webp", 0.7)，体积更小且部分支持透明，但 Safari 16.4 之前不支持，旧版会退化为 PNG
为什么点了下载却打不开图片？download 属性没配对
toDataURL() 只生成 data URL 字符串，不会自动触发下载。用 window.location.href = dataUrl 在多数浏览器里会跳转打开，而不是下载。
- 正确做法是创建
<a></a>元素，设href为 data URL，download属性指定文件名（如"chart.png"） - 必须把该
<a></a>添加进 DOM（例如document.body.appendChild(link)），再调用link.click() - 点击后立即移除元素（
document.body.removeChild(link)），避免内存泄漏
大画布导出卡死或崩溃？别硬扛，优先降采样或换 toBlob
当 canvas.width × canvas.height > ~10M 像素（比如 4000×3000），toDataURL() 会生成超长 Base64 字符串，Chrome 可能直接崩溃，Safari 可能拒绝解析。
- 临时缓解：用
setTimeout(() => { ... }, 0)把调用丢进微任务队列，避免阻塞 UI - 根本方案：导出前缩放画布（如
scale = 0.5），重绘到新 canvas 再导出 - 更优替代：
canvas.toBlob()+URL.createObjectURL()，不走 Base64 编码，内存占用低、兼容性好，尤其适合大图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
