Canvas导出空白或黑图的主因是资源未就绪，需确保图片load完成、跨域图设crossOrigin、优先用库内置导出、DPR适配需缩放canvas属性而非CSS、SVG需转canvas且内联资源、污染错误源于跨域图未配CORS。
Canvas 导出图片时 toDataURL() 返回空白或黑图
这是最常见问题：调用 canvas.toDataURL('image/png') 后得到的 base64 字符串解码出来是空白、黑块，或只有部分元素。根本原因通常是 canvas 内容未完全就绪——比如图片资源异步加载完成前就执行了导出。
- 确保所有
load事件，再调用toDataURL() - 若使用第三方渲染库（如 Konva、Fabric.js），优先调用其内置导出方法（如
stage.toDataURL()），而非直接操作底层 canvas -
跨域图片必须设置
crossOrigin="anonymous"，否则 canvas 会被污染，toDataURL()抛出安全错误 - 避免在 CSS 缩放或 transform 下直接导出；先用
getBoundingClientRect()计算实际渲染尺寸，按比例缩放 canvas 再绘制
Fabric.js 导出高清图要手动缩放 canvas
Fabric.js 默认导出分辨率受限于 canvas 像素尺寸（非 CSS 尺寸），100% 缩放下导出的图在 Retina 屏上模糊。解决方式不是改 width/height 属性，而是调整 canvas 元素的 width 和 height 属性值（非 style）并重绘。
- 获取设备像素比：
const dpr = window.devicePixelRatio || 1 - 临时放大 canvas：
canvas.setWidth(width * dpr); canvas.setHeight(height * dpr) - 调用
canvas.setZoom(dpr)并renderAll()，再toDataURL() - 导出后记得恢复原始 zoom 和尺寸，否则交互会错位
SVG 内容转图片需先转为
HTML5 可视化中大量用 SVG（如 D3、ECharts SVG 模式），但 svgElement.toDataURL() 不存在，浏览器也不支持直接导出。客户端方案本质是“SVG → canvas → 图片”。
- 用
canvg库可将 SVG 字符串渲染到 canvas：canvg(canvas, svgString) - 注意：含外部引用（
- 更稳定的方式是服务端转换（如 Puppeteer 截图、Node-canvas 渲染 SVG），适合对一致性要求高的场景
导出按钮点击无响应或报 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
这个错误明确指向 canvas 被污染（tainted），99% 是因为画布上绘制了跨域图片且未正确配置 CORS。即使图片来自同域 CDN，也常因 CDN 自动添加 CORS 头缺失而触发。
立即学习“前端免费学习笔记（深入）”；
- 检查图片请求响应头是否含
Access-Control-Allow-Origin: * - 给
crossOrigin="anonymous"，并在img.src = url之后再设置（顺序不能反） - 本地开发时 Chrome 会拦截 file:// 协议下的跨域请求，务必用本地 server（如
npx serve）启动页面 - 若无法控制图片服务，可用代理接口中转图片，或改用服务端截图规避
Canvas 导出看似简单，但真实项目里真正卡住人的，往往不是语法，而是资源加载时机、DPR 适配、跨域策略这些隐性依赖。别急着封装“一键导出”函数，先确认每张图、每个 SVG、每次缩放是否真的被 canvas 正确捕获了。
