用HTML Canvas实现网页海报在线生成与导出，关键在于控制截图范围、字体加载、图片跨域和设备像素比适配：使用独立海报容器并设固定宽高；跨域图片加crossOrigin属性；WebFont需预加载；canvas尺寸乘dpr并缩放CSS；下载必须在用户点击同步流中触发。
用 HTML Canvas 实现网页海报在线生成与导出，核心是把指定区域的 DOM 内容“拍成图”，再转成可下载的 PNG 或 JPEG。不依赖后端、不跳转页面，点一下按钮就出图——关键在于控制好截图范围、字体、图片跨域和设备适配这四件事。
选对目标容器，别截整个页面
直接对 document.body 截图容易出问题：fixed 元素错位、滚动条残留、背景图缺失。应该单独准备一个干净的海报容器，比如：
- 用
<div id="poster-root"></div>包住所有海报内容（头像、文案、二维码等） - 确保它内联写死宽高（如
width: 750px; height: 1334px;），不用百分比或vh - 避免在它里面用
transform、filter、backdrop-filter等 html2canvas 支持差的 CSS - 移除所有外部背景图，或确保它们已配好 CORS
处理跨域图片和中文字体
海报里如果有头像、商品图、二维码等来自 CDN 或 OSS 的图片，必须显式声明跨域；中文文字若没加载完，会变方块或空白：
- 图片资源服务端要返回
Access-Control-Allow-Origin: *（OSS/CDN 需单独配置 CORS 规则） - JS 中创建
Image对象时，必须在设置src前 加上img.crossOrigin = 'anonymous' - 用
@font-face引入 WebFont（如 .woff2），再调用document.fonts.load('14px YourFontName')等加载完成再截图 - 没 WebFont 时降级用安全字体栈：
'14px -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif'
适配高清屏，让海报不模糊
iPhone 和安卓高端机屏幕像素密度高（devicePixelRatio ≥ 2），直接按设计稿尺寸画 canvas，导出图会被拉伸、文字发虚、二维码扫不出：
立即学习“前端免费学习笔记（深入）”；
- 获取设备像素比：
const dpr = window.devicePixelRatio || 1 - canvas 实际宽高设为：
750 * dpr×1334 * dpr - 用 CSS 缩回视觉尺寸：
canvas.style.width = '750px'; canvas.style.height = '1334px'; - 所有绘图坐标、字号、线宽也要乘
dpr，例如ctx.fillText('Hi', 100 * dpr, 200 * dpr)
按钮点击必须同步触发下载
iOS Safari 和微信内置浏览器严格限制“非用户手势触发下载”，异步链路（比如 Promise.then、setTimeout）会导致静默失败：
- 按钮的
onclick或addEventListener('click', ...)必须直接调用主逻辑 - 如果用了
async/await，link.click()这行得写在 await 后的同一函数体内，不能挪到回调里 - 别给按钮加
disabled再恢复——禁用动作会切断用户手势上下文 - 完整链路示例：
html2canvas(posterRoot).then(canvas => { const url = canvas.toDataURL('image/png'); const a = document.createElement('a'); a.href = url; a.download = 'poster.png'; a.click(); });
不复杂但容易忽略。只要容器干净、图片跨域配对、字体等加载、DPR 乘到位、下载塞进点击同步流，就能稳定生成清晰可用的分享海报。
