如何利用 Blob 对象在前端不依赖后端的情况下直接合成并批量导出业务图表海报

直接用Blob+canvas.toBlob()无法批量导出海报，因toBlob异步且共用canvas会导致内容错乱、图片空白或浏览器卡死；必须为每张海报创建独立canvas并及时释放，再用JSZip打包生成ZIP文件。

为什么直接用 Blob + canvas.toBlob() 无法批量导出海报

因为 canvas.toBlob() 是异步的，批量调用时若不控制执行顺序或资源释放，极易出现 canvas 内容错乱、导出图片空白、甚至浏览器卡死。更关键的是：多个海报需不同尺寸/主题/数据，但共用同一个 canvas 元素时，上一个绘制未清空，下一个就直接覆盖——不是“导不出”，而是“导出的全是最后一张”。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 每个海报必须使用独立的 canvas 元素（document.createElement('canvas')），用完立即 remove() 或置为 null
• 避免复用同一 canvas 的 getContext('2d') 实例；每次新建 canvas 就新建 context
• 若用 chart.js 等库渲染，务必等 chart.render() 完成后再调用 toBlob，可用 chart.canvas.toBlob 但必须确认 chart._isMounted === true（v4+）或监听 afterRender 钩子

如何把多个 canvas 打包成 ZIP 而不依赖后端

浏览器没有原生 ZIP API，但 JSZip 可以纯前端生成 ZIP 文件，配合 Blob 和 URL.createObjectURL 实现零后端下载。注意：它不压缩图像本身，只是打包，所以体积取决于你导出的海报分辨率。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 安装 [email protected]（v4+ 对 IE11 不友好，且 ESM 导入在部分构建环境下有坑）
• 对每个 canvas 调用 canvas.toBlob(blob => { zip.file(`poster-${i}.png`, blob); }, 'image/png') ，不要用 canvas.toDataURL() → base64 → atob 这套，性能差且易爆内存
• 所有 toBlob 回调都 resolve 后再调 zip.generateAsync({type:'blob'})，推荐用 Promise.all(blobPromises) 控制流程
• 生成 ZIP 后，用 const url = URL.createObjectURL(blob) 创建临时链接，触发 a.download，用完立刻 URL.revokeObjectURL(url)

toBlob() 导出模糊/失真？检查这三个参数

默认 canvas.toBlob(callback, 'image/jpeg') 会降质压缩，而业务海报通常要高清印刷或大屏展示，模糊往往不是 canvas 绘制问题，而是导出配置不对。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 强制用 image/png：无损、支持透明，适合含文字/图表的海报；canvas.toBlob(cb, 'image/png')
• 若必须用 JPEG，显式传入质量参数：canvas.toBlob(cb, 'image/jpeg', 0.98)（0.95–0.99 是安全区间，低于 0.9 文字边缘明显锯齿）
• 检查 canvas 的 width/height 是否等于其 CSS 显示尺寸的 2 倍（即适配 Retina 屏）；否则即使 canvas 内容清晰，缩放后也会糊——例如显示宽 800px，应设 canvas.width = 1600，再用 ctx.scale(2, 2) 绘制

批量导出中途报错：常见于 Failed to execute 'toBlob' on 'HTMLCanvasElement'

这个错误几乎只发生在两种情况：canvas 为空白（未绘制完成就调了 toBlob），或 canvas 尺寸过大（Chrome 限制单个 canvas ≤ 16384×16384 像素，但实际超过 5000×5000 就可能触发 GPU 内存不足）。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 在 toBlob 前加守卫：if (canvas.width === 0 || canvas.height === 0) { console.warn('Canvas size invalid'); return; }
• 对超大尺寸海报（如 A0 尺寸 3370×4768px @2x），改用分块渲染 + 拼接 canvas，或降采样到 2x 分辨率再导出（业务接受前提下）
• 使用 try/catch 包裹 toBlob 调用，并 fallback 到 toDataURL（仅限调试，不可用于生产批量）
• 监控导出队列长度，超过 5 张时自动切片，每批最多 3 张，间隔 setTimeout(..., 100) 避免主线程阻塞

导出逻辑里最易被忽略的，是 canvas 元素的生命周期管理——不是“画完就能删”，而是“blob 回调执行完才能删”；很多问题表面是模糊或空白，根因其实是上一张海报的 canvas 还没释放，下一张就复用了它的绘图上下文。