URL.createObjectURL(blob)是唯一可行路径，因为的src只接受字符串URL；需手动revoke防内存泄漏，toBlob()异步且兼容性需兜底，fetch转blob绕过缓存但丧失HTTP缓存。
为什么直接用 URL.createObjectURL(blob) 是唯一可行路径
因为 src 属性只接受字符串 URL，不支持直接传入 Blob 或 ArrayBuffer。你不能写 img.src = myBlob，浏览器会报错或静默失败。必须通过 URL.createObjectURL(blob) 创建一个临时的、可被 DOM 解析的“对象 URL”字符串。
这个 URL 的生命周期绑定到当前文档：只要页面没卸载、且没手动调用 URL.revokeObjectURL()，它就一直有效；但若反复创建却不释放，会造成内存泄漏——尤其在频繁生成图片的场景（比如 canvas 截图轮播）。
- 每次调用
URL.createObjectURL(blob)都会分配新内存，即使 blob 内容相同 - 旧的 object URL 不会自动失效，必须显式调用
URL.revokeObjectURL(url) - 如果图片仅需展示一次（如上传预览），可在
img.onload后立即 revoke；若需复用（如缩略图缓存），应自行管理生命周期
从 canvas 导出 PNG 并显示的最小闭环操作
这是最常见也最容易出错的场景：用 canvas.toBlob() 生成 Blob，再转成 URL 给 toBlob() 是异步的，不能假设回调外的 img.src 立即可用。
const canvas = document.getElementById('myCanvas');
const img = document.getElementById('preview');
canvas.toBlob((blob) => {
if (!blob) return;
const url = URL.createObjectURL(blob);
img.src = url;
// ✅ 正确：加载完成后释放，避免内存滞留
img.onload = () => URL.revokeObjectURL(url);
}, 'image/png');
- 不要用
canvas.toDataURL()替代 —— 它返回 base64 字符串，体积大、解析慢、无法流式处理 -
toBlob()第二个参数指定 MIME 类型，'image/jpeg'可加质量参数（如{ quality: 0.8 }），但canvas实现不一定支持 - 某些旧版 Safari 对
toBlob()支持不全，可降级用toDataURL()+fetch(dataUrl).then(r => r.blob())，但代价高
处理非 canvas 场景：fetch 返回的图片响应体转 ![]()
当你用 fetch() 请求一张远程图片，想绕过浏览器默认缓存或做中间处理（如加水印、格式转换），需要手动读取 response body 为 Blob，再生成 object URL。
fetch('/api/chart?format=png')
.then(r => r.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
document.getElementById('chartImg').src = url;
// ⚠️ 注意：这里没有 onload 回调，需单独监听或确保 img 元素已存在
// 若 img 尚未插入 DOM，src 赋值后不会触发加载，也不会触发 onload
});
- response 的
Content-Type不影响blob()结果，它只是原始字节流；但会影响后续是否能被 - 若服务端返回的是压缩格式（如 webp），而浏览器不支持，
blob.type或用accept头协商 - 这种模式下无法利用 HTTP 缓存，所有资源都走 JS 内存，大图容易触发内存警告
常见错误现象与定位线索
当
-
console.log(blob)是否为有效Blob实例（blob.size > 0 && blob.type非空） -
console.log(img.src)是否为blob:http://...开头的合法 URL，而不是undefined或"" - 打开开发者工具的 Network 面板，过滤
blob:，看对应 URL 是否有 “(blocked)” 或 “(failed)” 标记 —— 这说明已被revoke或页面已销毁该上下文
特别注意：在 iframe 或 Shadow DOM 中创建的 object URL，可能因作用域隔离无法被主文档的
