html2canvas可实现点击按钮零配置前端生成海报，核心是截取指定dom容器转为canvas图片并触发下载。需指定干净容器、启用usecors、避免transform/filter、固定宽高、处理字体加载、适配设备尺寸，并在用户点击同步上下文中完成生成与下载。
点击按钮直接触发海报生成，不跳转不刷新
浏览器里点一下就出海报，核心是把当前页面 DOM 快照转成图片。不能靠截图工具或后端渲染——用户要的是零配置、前端纯 JS 完成。关键路径是：html2canvas 截取目标区域 → jsPDF 封装为 PDF 或转 toDataURL 得 PNG Base64 → 创建临时 <a></a> 标签触发下载。
常见错误是直接对 document.body 截图：字体跨域、CSS 变形、fixed 元素错位、滚动条残留。必须指定一个干净的容器节点（比如 <div id="poster-root">），并确保它内联样式完整、无外部字体链接、无 background-image 跨域资源。<ul>
<li>用 <code>html2canvas 时加 useCORS: true, allowTaint: false，否则跨域图片空白
transform 或 filter，html2canvas 对它们支持极差800px × 1200px），别依赖百分比或 vh
scale: 2 参数，但内存占用翻倍，iOS Safari 容易崩溃按钮绑定事件时绕过 iOS Safari 的「非用户手势」限制
iOS Safari 禁止 JS 自动触发下载，除非操作明确来自用户点击。所以不能在 setTimeout 或 Promise.then 里调 click()，也不能用 fetch 回来再下载——必须把整个生成+下载链塞进原生 onclick 回调里。
实操上，按钮的 onclick 必须直接调用主函数，且不能被 Promise 异步“断开”。如果用了 async/await，得确保 download() 调用仍在同一事件循环帧内：
button.onclick = async () => {
const canvas = await html2canvas(posterRoot);
const dataUrl = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = 'poster.png';
link.href = dataUrl;
link.click(); // ✅ 这行必须在 onclick 同步上下文中
};
- 别用
fetch().then(() => download())，iOS 会静默失败 - 不要给按钮加
disabled再异步恢复——禁用动作会切断手势链 - 如果海报含 WebFont，先用
document.fonts.load()等加载完成再截图，否则文字变方块
适配不同设备尺寸：用 CSS 媒体查询预设海报画布
海报不是响应式网页，它需要固定宽高比（如 9:16）。但用户可能在手机或桌面打开页面，直接按视口截会变形。正确做法是在 HTML 里声明一个隐藏的、带固定尺寸的 <div id="poster-root">，所有海报内容用绝对定位或 flex 布局塞进去，再用 CSS 媒体查询控制其内部元素缩放：<pre class="brush:php;toolbar:false;">#poster-root {
width: 375px; height: 667px; /* iPhone SE 尺寸 */
}
@media (min-width: 768px) {
#poster-root {
width: 768px; height: 1366px; /* iPad 尺寸 */
}
}</pre>
<p>这样 <code>html2canvas 截出来就是对应设备的清晰比例，不用 JS 动态改 style。
- 禁止用
window.innerWidth计算 poster-root 尺寸——SSR 或首屏渲染时不可靠 - 所有文字用
rem或vw，避免固定px导致小屏文字糊成一片 - 背景色用
background-color，别用background-image，后者在html2canvas中常失效
生成失败时快速定位：捕获 html2canvas 的 reject 原因
html2canvas 失败不报具体错误，只 throw 一个空对象。必须用 try/catch 包住，并检查 console.error 输出的原始堆栈：
try {
const canvas = await html2canvas(el, options);
} catch (err) {
console.error('html2canvas failed:', err); // ? 关键日志
alert('海报生成失败，请检查控制台');
}
高频失败原因集中在三类：
-
SecurityError: The operation is insecure.→ 页面含跨域图片且没开CORS，换图或加crossorigin="anonymous" - 白屏或部分空白 → 容器有
overflow: hidden或父级transform，移除或用cloneNode(true)提前复制一份干净 DOM - 文字缺失 → 字体未加载完成，加
document.fonts.load('14px "PingFang SC"').then(...)
真机调试时，Safari 开发者工具的「Console」标签页必须开着，否则错误被吞掉。
