todataurl() 返回空白、黑图或"data:,"是因跨域污染或绘制未完成；需服务端配置cors、img.crossorigin="anonymous"、等待onload、正确传参、填白底、用a标签下载、大画布改用toblob()。
toDataURL() 调用后返回空白、黑图或"data:,"
这不是代码写错了，而是 Canvas 已被跨域污染或尚未完成绘制——浏览器静默禁止读取像素，toDataURL() 只能返回空字符串或纯黑。
验证方式：控制台直接执行 canvas.toDataURL()，如果返回极短字符串（如 "data:,"），基本可锁定污染。
- 必须服务端响应头包含
Access-Control-Allow-Origin: *（或明确域名） - 前端加载图片时，
img.crossOrigin = "anonymous"必须显式设置（仅设crossorigin属性不够，部分浏览器需 JS 显式赋值） - 本地开发禁用
file://协议，改用 HTTP 服务（如python3 -m http.server） - 绘图必须等图片真正加载完成：
img.onload = () => { ctx.drawImage(img, 0, 0); /* 再调用 toDataURL */ }；src赋值 ≠ 图片就绪
导出 PNG / JPEG / WebP 时参数传错导致格式失效
toDataURL() 的第一个参数决定输出格式，第二个参数只对 image/jpeg 和 image/webp 生效，且必须是 0.0–1.0 的小数。传错会退化为默认 PNG 或静默忽略。
- 导出 PNG：
canvas.toDataURL("image/png")—— 第二个参数会被完全忽略 - 导出 JPEG：
canvas.toDataURL("image/jpeg", 0.92)—— 传92、"0.92"或1.2都无效 - 导出 WebP：
canvas.toDataURL("image/webp", 0.7)—— Safari 16.4+ 才支持，旧版自动 fallback 到 PNG - 透明区域导出 JPEG 会变黑：需提前用
ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, w, h)填白底
点击下载却打不开、文件损坏或空白
toDataURL() 只生成字符串，不触发下载。直接赋值给 window.location.href 在 iOS Safari 等环境下极易因 URL 长度超限（约等效 2MB）而截断，导致空白文件。
- 正确做法：创建
a元素，设href为 data URL，download属性指定文件名（如"chart.png"） - 必须将该
a元素 append 到 DOM（如document.body.appendChild(link)），再调用link.click() - 点击后立即
document.body.removeChild(link)，避免内存泄漏 - 大画布（>10M 像素）优先用
toBlob()+URL.createObjectURL()，避开 Base64 编码膨胀和长度限制
大画布导出卡死、Chrome 崩溃或 Safari 拒绝解析
当 canvas.width × canvas.height > ~10M（例如 4000×3000），toDataURL() 生成的 Base64 字符串可能超 10MB，触发浏览器内存或长度限制。
- 临时缓解：用
setTimeout(() => { canvas.toDataURL(...) }, 0)推入微任务队列，避免阻塞 UI - 根本方案：缩放画布（如
scale = 0.5），重绘到新 canvas 后再导出 - 更优路径：改用
canvas.toBlob(callback, "image/jpeg", 0.85)，配合URL.createObjectURL()和URL.revokeObjectURL()，内存占用低、无长度限制、兼容性好 - 注意：
toBlob()是异步的，回调里才能安全操作 Blob，不能像toDataURL()那样直接返回值
Base64 编码本身会让体积膨胀约 33%，而浏览器对 data URL 的长度容忍度差异极大——这是最容易被忽略的“隐性崩溃点”，尤其在移动端和高分屏场景下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
