直接用 blob 生成海报失败主因是 canvas.toblob() 异步未等待、mime 类型不兼容或字体未加载完成就绘图；需 promise 封装 toblob、正确选格式、等待字体就绪、及时 revokeobjecturl。
为什么直接用 Blob 生成海报会失败
浏览器里无法直接把 HTML 或 Canvas 内容“变成”一张 PNG/JPEG 文件并触发下载，除非你把它转成 Blob —— 但很多人卡在第一步：调用 canvas.toBlob() 后没等回调就执行了后续逻辑，或者传了不支持的 MIME 类型（比如用 "image/webp" 却没检查浏览器兼容性），结果 Blob 是空的、下载文件打不开，或根本没触发下载。
canvas.toBlob() 的正确调用时机和参数选择
toBlob() 是异步的，必须靠回调或 Promise 包装才能确保数据就绪；同时，不同浏览器对压缩质量、格式的支持差异明显：
- Chrome / Edge 支持
toBlob(callback, "image/jpeg", 0.9)，但 Safari 直到 iOS 16.4 才稳定支持 JPEG 质量参数，低版本只能传"image/png" - 如果海报含半透明区域（比如阴影、蒙版），用
"image/jpeg"会强制丢弃 alpha 通道，背景变黑——此时必须用"image/png" - 不要写
canvas.toBlob(...).then(...)：它返回undefined，不是 Promise
推荐封装成 Promise 版本：
function canvasToBlob(canvas, type = "image/png", quality = 0.9) {
return new Promise((resolve) => {
canvas.toBlob(resolve, type, type === "image/jpeg" ? quality : undefined);
});
}
用 URL.createObjectURL 触发下载但不污染内存
拿到 Blob 后，得生成临时 URL 才能用 <a download></a> 下载；但每次调用 createObjectURL 都会保留引用，不手动释放会导致内存泄漏：
- 必须在
click事件后立即调用URL.revokeObjectURL(url) - 不能把
download属性设为空字符串（download=""），某些浏览器会忽略，应设为具体文件名如download="haibao.png" - 移动端 Safari 对
<a></a>自动点击限制严格，需在用户手势（如touchend）上下文中触发click()
安全下载示例：
async function downloadCanvasAsImage(canvas, filename = "haibao.png") {
const blob = await canvasToBlob(canvas);
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 关键：立刻释放
}
文字渲染模糊、字体未加载完成就绘图
海报里用 ctx.fillText() 写中文却显示方块或模糊？大概率是字体还没加载完就执行了绘制。Canvas 不会自动等待 @font-face 加载，也不能直接读取 CSS 中定义的字体状态：
- 用
document.fonts.load("24px 'PingFang SC'")检查并等待字体就绪（注意：需在字体实际已声明的前提下） - 避免使用系统未预装的字体名（如
"HarmonyOS Sans"），优先用 Web Font 的font-display: swap+ 显式加载控制 - 导出前用
ctx.textBaseline = "top"和ctx.textAlign = "left"统一基线，否则不同浏览器定位偏差明显
字体就绪后再绘图的最小验证逻辑：
await document.fonts.load("bold 28px sans-serif"); // 兜底用通用字体确保可用
ctx.font = "bold 28px sans-serif";
ctx.fillText("测试文字", 20, 50);
Canvas 导出海报真正难的不是 API 调用，而是所有异步环节（字体、图片加载、toBlob 回调、URL 创建与释放）必须严格串行且可感知失败；漏掉任意一个 await、少一次 revokeObjectURL、或在字体未就绪时绘图，都会导致输出异常且难以调试。
