toblob 失效主因是异步执行未等待、资源未加载完成（如图片未触发 load 事件）、跨域图片未设 crossorigin="anonymous"、canvas 宽高为 0 或仅靠 css 缩放导致像素失真。
toBlob 方法在 Canvas 中为什么经常不生效
因为 toBlob 是异步方法，且依赖 canvas 内容已实际绘制完成。常见失效场景包括：canvas 尚未渲染（比如图片 src 还在加载）、跨域图片未设置 crossOrigin、或调用时 canvas 宽高为 0。
关键点：必须确保 canvas.getContext('2d').drawImage(...) 已执行完毕，且所有图像资源处于“完全加载”状态。对 HTMLImageElement，需监听 load 事件后再调用 toBlob。
- 跨域图片必须设置
img.crossOrigin = 'anonymous'，否则toBlob会静默失败（控制台可能无报错，但回调不触发） - Canvas 宽高应显式设置（如
canvas.width = 800; canvas.height = 600），不要仅靠 CSS 缩放 - 若使用
requestAnimationFrame或动画帧后立即调用toBlob，仍可能因渲染延迟而导出空白
如何正确调用 toBlob 并触发下载
toBlob 的第二个参数指定 MIME 类型（如 'image/png' 或 'image/jpeg'），第三个参数仅对 JPEG/WebP 生效，是质量值（0–1）。它不返回 Blob，而是通过回调函数传入。
要下载文件，需手动创建 a 标签并触发点击。注意：Blob URL 必须用 URL.createObjectURL(blob) 生成，且在下载后建议调用 URL.revokeObjectURL() 释放内存。
canvas.toBlob(function(blob) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'canvas-export.png';
a.click();
URL.revokeObjectURL(url); // 避免内存泄漏
}, 'image/png');
toBlob 在 Safari 和旧版 Chrome 中的兼容性问题
Safari 14.1+ 才完整支持 toBlob；更早版本（包括 iOS Safari）会直接忽略该方法，回调不执行。Chrome 50+、Firefox 41+ 支持良好。
若需兼容 Safari ≤14，可降级使用 toDataURL + atob + Blob 构造，但要注意 Base64 数据体积大、编码耗时、且对超大 canvas 易触发内存限制或卡顿。
- 检测方式：
if (typeof canvas.toBlob === 'function') - 避免在循环中高频调用
toBlob，尤其配合requestAnimationFrame—— 每次都会创建新 Blob URL，容易堆积 - 导出高清图时，注意设备像素比（
window.devicePixelRatio）：若 canvas 按 DPR 缩放绘制，toBlob输出尺寸即为物理像素，无需额外缩放
导出时图片模糊或尺寸不对的常见原因
根本问题常出在 canvas 像素密度与 CSS 渲染尺寸不匹配。例如：canvas 元素 CSS 宽高是 400×300，但未设置 canvas.width/canvas.height，默认为 300×150，导致拉伸失真。
正确做法是按目标输出分辨率设置 canvas 像素尺寸，并用 CSS 控制显示大小。若需导出 1920×1080 图片，就设 canvas.width = 1920; canvas.height = 1080;，再用 CSS 缩小预览（不影响导出精度）。
- 不要用
canvas.style.width/style.height替代canvas.width/height - 使用
ctx.imageSmoothingEnabled = false可禁用插值，适合像素画等需要硬边的场景 - 若导出内容含文字，注意字体是否已加载完成（
document.fonts.load可检测）
toBlob 回调做后续动作，别依赖同步假象。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
