toDataURL()仅生成Base64 URL字符串，不自动保存文件；需配合a标签download属性或Blob触发下载，且须防范跨域污染、合理选择格式与质量、避免大画布性能问题。
Canvas 的 toDataURL() 方法本身不保存文件，它只生成一个 Base64 编码的 URL 字符串；真要“保存到本地”，必须配合 a 标签的 download 属性或 Blob + URL.createObjectURL() 手动触发下载。
toDataURL() 返回空字符串或黑图？检查 canvas 是否跨域污染
这是最常踩的坑：只要 Canvas 曾经 drawImage() 过一张来自其他源（比如 https://example.com/img.png）的图片，且该图片服务器未返回 Access-Control-Allow-Origin 头，Canvas 就会被标记为“污染”，此时调用 toDataURL() 会静默失败——返回空字符串（""），或在某些浏览器中返回一个全黑图像。
- 验证方式：在控制台执行
canvas.toDataURL()，如果返回""或长度异常短（如"data:,"），基本就是污染了 - 修复前提：图片服务端必须支持 CORS，即响应头含
Access-Control-Allow-Origin: *或指定域名 - 加载图片时显式声明
crossOrigin：const img = new Image(); img.crossOrigin = "anonymous"; img.src = "https://cdn.example.com/chart.png";
导出 PNG vs JPEG：type 和 quality 参数怎么选
toDataURL() 默认输出 PNG（无损、支持透明），但可通过第一个参数指定 MIME 类型，第二个参数控制 JPEG 质量（仅对 "image/jpeg" 或 "image/webp" 有效）。
-
canvas.toDataURL("image/png")：默认行为，体积大但保真，适合含文字、线条的图表 -
canvas.toDataURL("image/jpeg", 0.92)：JPEG 压缩，quality取值 0–1，推荐 0.85–0.95；注意——透明区域会变黑，无法保留 alpha -
canvas.toDataURL("image/webp", 0.8)：更小体积、支持透明（部分浏览器），但 Safari 旧版不支持 - 错误写法：
toDataURL("image/jpeg", 95)（传整数 95 会被忽略，必须是 0–1 小数）
大画布导出卡顿或内存溢出？分块渲染或降采样
当 canvas.width × canvas.height > ~10M 像素（例如 4000×3000），toDataURL() 可能阻塞主线程数秒，甚至触发 Chrome 的“Aw, Snap!”崩溃。这不是 bug，是浏览器对超大 Base64 字符串的保护机制。
立即学习“前端免费学习笔记（深入）”；
- 临时缓解：用
setTimeout把调用丢进任务队列，避免阻塞 UIsetTimeout(() => { const dataUrl = canvas.toDataURL("image/png"); // 后续处理 }, 0); - 根本方案：导出前缩放画布（降采样）
const scale = 0.5; const tmpCanvas = document.createElement("canvas"); tmpCanvas.width = canvas.width * scale; tmpCanvas.height = canvas.height * scale; const ctx = tmpCanvas.getContext("2d"); ctx.drawImage(canvas, 0, 0, tmpCanvas.width, tmpCanvas.height); const dataUrl = tmpCanvas.toDataURL("image/jpeg", 0.9); - 极大数据场景（如地图/设计稿）：改用
canvas.toBlob()避免生成巨型字符串，再用URL.createObjectURL(blob)下载
真正保存文件：a.download + click 是最简可靠路径
toDataURL() 产出的是字符串，不是文件。想让用户点一下就存到“下载”文件夹，必须模拟点击带 download 属性的 a 标签。
- 基础写法（兼容所有现代浏览器）：
function saveCanvasAsPNG(canvas, filename = "canvas.png") { const dataUrl = canvas.toDataURL("image/png"); const a = document.createElement("a"); a.href = dataUrl; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); } - 注意点：
download属性在跨域 URL 上会被忽略，所以务必确保dataUrl是同源的（toDataURL()生成的data:协议 URL 永远同源） - 不要用
window.open(dataUrl)：可能被弹窗拦截，且不会触发下载
toDataURL 的本质是快照，不是持久化存储；它的成败高度依赖 Canvas 状态是否干净、尺寸是否合理、以及你是否意识到“生成 URL”和“触发下载”是两个分离动作。跨域、格式选择、性能边界这三点，漏掉任何一个都可能让“保存”功能在某个用户那里彻底失效。
