如何不借助后端API，仅用Blob对象合成并直接下载业务海报？

本文共计842个文字，预计阅读时间需要4分钟。

关键判断点：

如何确保 Canvas 不被污染并成功导出 Blob Canvas 被污染后，toBlob() 回调不会执行，Promise 也不会 reject，行为静默——这是最常踩的坑。

• 所有 <img> 创建时必须显式设置 crossOrigin = "anonymous"，哪怕图片同源（某些 CDN 仍需）
• 等 img.onload 触发后再调用 ctx.drawImage()，不能靠 setTimeout 猜时机
• 绘制完成后，用 ctx.getImageData(0, 0, 1, 1) 主动触发污染检查：若抛出 SecurityError，说明有图未正确跨域
• 优先用 canvas.toBlob(callback, 'image/png', 0.95) 而非 toDataURL()，避免 base64 编码膨胀和内存峰值

const img = new Image(); img.crossOrigin = 'anonymous'; // 必须 img.src = 'https://cdn.example.com/poster-bg.png'; img.onload = () => { ctx.drawImage(img, 0, 0); try { ctx.getImageData(0, 0, 1, 1); // 主动验污 } catch (e) { console.error('Canvas is tainted:', e); return; } canvas.toBlob(blob => { downloadBlob(blob, 'business-poster.png'); }, 'image/png', 0.95); };

如何把 HTML 海报（含样式/字体）转成高质量 PNG Blob 纯 HTML + CSS 的海报（比如用 div 排版、@font-face 引入字体）无法直接被 Canvas 绘制。必须借助 html2canvas，但它默认不支持 Web Font 渲染、伪元素、transform 缩放失真等问题。

实操建议：

• 确保目标容器设了固定宽高（如 width: 750px; height: 1334px），避免 html2canvas 自动缩放导致模糊
• 加载字体后手动等待：用 document.fonts.load('16px "YourFont"') + await，再执行截图
• 传参时启用 useCORS: true 和 allowTaint: false，否则远程资源白屏
• 导出前加一层 scale: 2 提升清晰度，再用 canvas.toBlob 压缩回原始尺寸，比直接导出更锐利

await document.fonts.load('bold 24px "PingFang SC"'); html2canvas(container, { useCORS: true, allowTaint: false, scale: 2, width: 750, height: 1334 }).then(canvas => { canvas.toBlob(blob => downloadBlob(blob, 'poster.png'), 'image/png', 0.9); });

下载 Blob 的兼容写法与隐藏陷阱 URL.createObjectURL(blob) 在 Safari 和部分 iOS WebView 中可能失效，表现为点击无反应；而 a.download 属性对跨域 blob URL 无效，但本地生成的 blob URL 是安全的。

稳妥做法：

• 始终用 const url = URL.createObjectURL(blob) 创建地址，不要复用旧 URL（避免内存泄漏）
• a.href 必须赋值为该 url，a.download 设为文件名（不含路径），然后 a.click()
• 调用 click() 后立即 URL.revokeObjectURL(url)，尤其在循环批量下载时，否则内存暴涨
• 不要在定时器或异步回调外提前创建 a 标签——某些安卓 WebView 对动态插入的 a 元素 click 不响应

function downloadBlob(blob, filename) { 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); // 关键：必须清理 } Canvas 污染和字体加载时机是两个最隐蔽的断点，调试时别只盯着下载逻辑——先确认 toBlob 回调是否进入，再确认 downloadBlob 是否被调用。