toblob是htmlcanvaselement原生异步方法，调用格式为canvas.toblob(callback, type, quality)：callback必填且接收blob对象；type指定mime类型，默认image/png；quality仅对jpeg/webp生效，范围0–1。
toBlob 方法的基本调用和参数含义
toBlob 是 HTMLCanvasElement 的原生方法，用于将当前画布像素数据异步转为 Blob 对象。它不返回值，而是通过回调函数接收生成的 Blob —— 这点和同步的 toDataURL 有本质区别。
典型调用形式是：canvas.toBlob(callback, type, quality)，其中：
-
callback是必填函数，第一个参数就是生成的Blob；第二个参数（如有）是失败原因（仅部分浏览器支持错误传递，实际常为undefined） -
type指定 MIME 类型，如"image/png"或"image/jpeg"；不传则默认为"image/png" -
quality仅对"image/jpeg"或"image/webp"有效，取值范围0–1，低于0.1可能被忽略或截断
导出 JPEG 时质量参数没生效？检查 canvas 是否含透明像素
如果画布内容本身带 alpha 通道（比如用 fillStyle = "rgba(255,0,0,0.5)" 绘制），而你指定 type = "image/jpeg"，浏览器会自动将透明区域填充为黑色（或白色，取决于实现），但更关键的是：部分浏览器（如旧版 Safari）会忽略 quality 参数，直接按固定压缩比输出。
解决办法是预先“去透明”：
- 创建一个同尺寸新 canvas，用
context.fillStyle = "#ffffff"填满背景 - 再把原 canvas 绘制上去：
newCtx.drawImage(oldCanvas, 0, 0) - 对这个新 canvas 调用
toBlob，此时quality才稳定生效
为什么回调没执行？常见异步陷阱和兼容性问题
toBlob 是异步操作，但它的“异步”不走事件循环队列，而是由浏览器底层编码线程完成后再回调——这意味着它可能在 setTimeout(fn, 0) 之前或之后触发，不可预测。
更实际的问题是兼容性：
- IE 完全不支持
toBlob（需 fallback 到toDataURL+fetch或atob+Blob构造） - 某些 Android WebView（如 4.4.x）存在 bug：回调永远不触发，或只在 canvas 有非零像素时才触发
- 若 canvas 尚未渲染（例如刚
getContext但没画任何东西），Chrome 可能返回空Blob（size === 0），需手动校验
建议加上简单防护：
canvas.toBlob(blob => {
if (!blob || blob.size === 0) {
console.error("toBlob failed: empty or missing blob");
return;
}
// 后续处理，如 URL.createObjectURL(blob)
}, "image/png");
拿到 Blob 后怎么下载？别漏掉 URL.revokeObjectURL
常见做法是用 URL.createObjectURL(blob) 创建临时地址，再模拟点击 <a download></a> 下载。但每次调用都会占用内存，且不会自动释放。
必须在下载触发后尽快清理：
- 给
<a></a>添加onclick或使用addEventListener("click", ...) - 在事件处理函数里调用
URL.revokeObjectURL(url)，**不能等到下载完成才调**（浏览器没提供下载完成钩子） - 如果用户取消下载或关闭标签页，该 URL 会自动失效，但主动
revoke更稳妥
示例片段：
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "canvas-export.png";
a.click();
URL.revokeObjectURL(url); // 立即释放，不是等 click 结束
});
注意：Safari 对 download 属性限制严格，本地文件协议（file://）下可能静默失败，这种场景只能靠服务端接收 Blob 二进制流来中转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
