html2canvas生成海报最可行但需适配四点：跨域（设usecors、img.crossorigin）、dpr（scale×devicepixelratio并同步设置canvas宽高）、字体（等font.load完成）、渲染时序（promise.all(img.decode())）；否则真机易现黑图、空白、模糊、文字缺失。
直接用 html2canvas 生成海报图片，是当前 H5 分享场景下最可行、最可控的前端方案；但不加适配就调用，90% 会在真机上失败——黑图、空白、模糊、文字缺失，全因没处理好跨域、DPR、字体、渲染时序这四点。
为什么 html2canvas 在微信里常导出黑图或空字符串
核心原因是 canvas 被“污染”（tainted）后仍强行调用 toDataURL()，浏览器直接拒绝返回数据。常见触发条件：
- 页面中用了跨域图片（如用户头像来自微信 CDN、CDN 图片未配 CORS 头），且
useCORS: false或未设img.crossOrigin = 'anonymous' - 图片加载完成前就执行了截图，
onclone回调里没强制等待img.complete或没触发重排 - 目标 DOM 里有
background-image指向跨域地址，而allowTaint: true是禁用项（安全策略不允许）
修复方式不是加 allowTaint: true（无效且危险），而是：确保所有图片资源支持 CORS，或在 onclone 中替换为 base64 内联图；对动态内容，用 Promise.all(imgs.map(img => img.decode())) 等待解码完成后再截图。
html2canvas 高清输出必须配对的三个参数
仅设 scale: 2 不够，必须同步调整 canvas 尺寸、CSS 缩放、绘图坐标，否则仍是模糊或错位：
-
scale设为window.devicePixelRatio * 2（iOS/Android 通常为 2～3） -
width和height必须传入原始 DOM 的offsetWidth/offsetHeight，不能传放大后的值 - 必须显式传入
canvas实例，并提前按scale设置其width/height属性（而非 CSS）
漏掉任意一项，都会导致文字锯齿、二维码无法识别、按钮区域偏移。示例关键片段：
const canvas = document.createElement('canvas');
const scale = window.devicePixelRatio * 2;
canvas.width = target.offsetWidth * scale;
canvas.height = target.offsetHeight * scale;
const opts = {
scale,
canvas,
width: target.offsetWidth,
height: target.offsetHeight,
useCORS: true,
onclone: (doc) => {
doc.querySelectorAll('img').forEach(img => {
img.crossOrigin = 'anonymous';
img.loading = 'eager';
});
}
};
文字渲染失败？先检查字体是否就绪
Canvas 绘制中文时，若字体未加载完成，ctx.measureText('测').width 可能返回 0，导致布局计算全错，甚至整块跳过绘制。这不是 bug，是浏览器行为：
- 用
@font-face引入自定义字体时，必须等document.fonts.load('14px "YourFont"')resolve 后再调用html2canvas - 降级用系统字体栈时，避免写死
'Microsoft YaHei'，改用'-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' - 绘图前加兜底判断：
if (ctx.measureText('测').width > 0) { ctx.fillText(...) }
尤其注意：Vue/React 中动态插入的文案，可能在 onclone 时 DOM 已存在但字体尚未就绪，需额外加 setTimeout(..., 100) 或监听 fontload 事件。
分享按钮自己藏起来？别靠 v-if 或 display: none
想让生成海报时「分享按钮」不出现，但又不能真删掉它（否则用户点不到），常见错误是用 v-if="!isGenerating" 或 style="display: none" —— 这会导致 html2canvas 截图时该节点根本不在克隆 DOM 中，按钮消失，但用户操作入口也没了。
- 正确做法：用
visibility: hidden+pointer-events: none，元素仍在 DOM 树中，仅视觉隐藏且不可交互 - 更稳妥的是在
onclone回调中临时移除按钮样式：clonedDoc.querySelector('.share-btn').style.visibility = 'hidden' - 切忌用
opacity: 0，部分版本html2canvas会忽略透明元素的子内容
真正难的不是生成一张图，而是让这张图在 iPhone 15 Pro、安卓折叠屏、微信内置浏览器、甚至微信开发者工具里，都保持文字清晰、二维码可扫、位置精准、无白边——这些细节不逐个验证，上线后只能靠用户反馈来修。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
