canvas.toDataURL()导出失败主因是跨域污染，即drawImage跨域图片后canvas被标记为污染状态，导致返回空白或黑图；需用HTTP服务、设置crossOrigin且服务器支持CORS，同时注意DPR适配、格式兼容及Blob内存管理。
canvas.toDataURL() 导出图片失败的常见原因
直接调用 toDataURL() 返回空白、黑图或 "data:,"，大概率不是代码写错了，而是 canvas 处于「污染状态」——只要 canvas 曾经 drawImage 了跨域图片（哪怕只是本地 file:// 打开 HTML），浏览器就会禁止读取像素数据，toDataURL() 和 toBlob() 都会静默降级为透明图或空字符串。
- 检查控制台是否报错
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. - 本地开发时用
file://协议加载页面，哪怕图片同目录也会触发跨域；必须走http://或https://（如用python3 -m http.server启服务） - 图片标签设置了
crossOrigin="anonymous"，但服务器没返回Access-Control-Allow-Origin响应头，依然算污染
toDataURL() 的参数和格式选择
toDataURL() 默认输出 image/png，但支持指定 MIME 类型和质量（仅对 image/jpeg 和 image/webp 有效）。质量参数不传或超出范围（0–1）会被忽略，且 image/png 完全不支持压缩。
const pngData = canvas.toDataURL('image/png'); // 无损，体积大
const jpegData = canvas.toDataURL('image/jpeg', 0.8); // 质量 80%，支持 0–1
const webpData = canvas.toDataURL('image/webp', 0.9); // WebP 格式，兼容性需查 caniuse- 导出为 JPEG 时，canvas 背景是透明的，结果会变成黑色背景（PNG 保留 alpha）
- 想导出白底 JPEG？先用
ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, canvas.width, canvas.height);填底 - 移动端 Safari 对
image/webp支持差，生产环境慎用
下载导出的图片文件（不依赖 a.download）
用 标签触发下载最直接，但 download 属性在某些 iOS Safari 版本和微信内置浏览器中失效。更稳妥的方式是创建 Blob + URL.createObjectURL，再模拟点击。
function downloadCanvasAsImage(canvas, filename = 'canvas.png') {
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 'image/png');
}- 避免直接用
toDataURL()拼接data:URL 下载：Base64 编码会使体积增大 ~33%，大图可能触发 iOS Safari 的 URL 长度限制（约 2MB 等效） -
toBlob()是异步的，不能像toDataURL()那样直接赋值给a.href，必须等回调 - 用完
URL.createObjectURL()后务必调用URL.revokeObjectURL()，否则内存泄漏
导出高清图（设备像素比 devicePixelRatio）
canvas 默认按 CSS 像素渲染，Retina 屏上会模糊。要导出清晰图，得按 window.devicePixelRatio 缩放 canvas 内部绘图缓冲区，但注意：CSS 尺寸不变，只放大 backing store。
立即学习“前端免费学习笔记（深入）”；
function getHighResolutionCanvas(canvas) {
const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
const ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr);
return { canvas, ctx };
}- 调用
getHighResolutionCanvas()后，所有绘图操作（fillRect、drawImage）坐标仍按 CSS 像素写，因为ctx.scale()已处理缩放 - 导出前必须确保绘图已完成，否则
toDataURL()拿到的是缩放后未重绘的旧缓冲区 - 如果 canvas 已有内容，缩放前需用
ctx.drawImage(canvas, 0, 0, width, height)把原内容重采样到新缓冲区
导出逻辑本身简单，真正卡住人的永远是跨域、DPR、格式兼容和内存管理这几个点。尤其别在调试时用 file:// 反复试 —— 问题不在代码，在加载方式。
