toDataURL导出空白或黑图主因是Canvas未完成绘制或被跨域污染；需确保图片onload后绘图、设置img.crossOrigin='anonymous'且服务端返回CORS头、避免file://协议、检查尺寸是否超限。
toDataURL 方法导出的图片为什么是空白或黑屏
Canvas 导出 Base64 图片为空白（纯黑、纯透明或全白），绝大多数情况是因为 toDataURL 被调用时 Canvas 还没完成图像绘制——尤其是加载外部图片后直接调用，没等 img.onload 触发就执行了绘图和导出。
关键点：Canvas 内容必须已实际渲染，否则 toDataURL 只能读到初始清空状态（透明黑色）。
- 使用
img.onload回调确保图片加载完成后再ctx.drawImage() - 避免在
img.src = 'xxx'后立刻绘图；浏览器异步加载，赋值不等于就绪 - 如果用
createImageBitmap或fetch + createObjectURL，也要 await 解析完成
toDataURL 的参数影响输出质量与格式
toDataURL 默认生成 image/png，但支持 image/jpeg 和 image/webp（需浏览器支持），第二个参数可控制 JPEG/WebP 的质量（0.0–1.0）。PNG 不接受质量参数，传了也忽略。
- 导出 JPEG：用
canvas.toDataURL('image/jpeg', 0.92)，比 PNG 小很多，适合截图类场景 - WebP 更小但兼容性差：Chrome/Firefox/Edge 支持，Safari 16.4+ 才支持，旧版 Safari 会退化为 PNG
- 省略参数等价于
toDataURL('image/png')，不是自动识别格式 - 若 Canvas 有透明区域又导出 JPEG，背景会变黑——JPEG 不支持透明，需提前用
ctx.fillStyle = '#fff'; ctx.fillRect(0,0,w,h)填白底
跨域图片导致 toDataURL 抛出 SecurityError
当 Canvas 绘制了来自其他域名的图片（如 CDN 上的 https://cdn.example.com/photo.jpg），且该图片响应头不含 Access-Control-Allow-Origin，调用 toDataURL 会直接抛出 SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 前端无法绕过——这是浏览器强制安全策略，不是代码能 catch 住的错误
- 解决路径只有两条：服务端给图片加 CORS 响应头，或改用代理接口把图片中转到同域
-
img.crossOrigin = 'anonymous'必须在设置src前写，只写crossOrigin不设值（如img.crossOrigin = ''）无效 - 本地 file:// 协议下加载本地图片也会触发污染，开发时建议用 live server 启 HTTP 服务
导出大图时内存溢出或卡死怎么办
Canvas 宽高超过 4096×4096（不同设备上限不同），toDataURL 可能返回空字符串、崩溃或长时间无响应。这不是 bug，是浏览器对单次像素处理量的硬限制。
- 先用
canvas.width和canvas.height检查尺寸，超限则缩放再导出：const scale = Math.min(4096 / w, 4096 / h); - 不要依赖
toDataURL生成超高清图；如需高质量输出，考虑用canvas.getContext('2d', { willReadFrequently: true })配合getImageData分块处理（复杂度高，慎选） - 移动端尤其敏感——iOS Safari 对 canvas 尺寸更保守，实测常在 2048×2048 就开始不稳定
真正难的不是调用 toDataURL，而是判断它什么时候「真能用」：图片是否加载完、是否被污染、尺寸是否越界、目标格式是否被支持——这些条件缺一不可，漏掉任意一个，Base64 字符串就只是个空壳。
