html2canvas能截取任意DOM元素，但仅限当前文档内已挂载且具可计算样式的元素；不支持iframe、跨域图片、video帧、含外部引用的SVG等，其原理是重建渲染树而非所见即所得。
html2canvas 能不能直接截取任意 DOM 元素
能，但有严格限制：只支持渲染「当前文档内、已挂载、可计算样式」的元素。常见失败场景包括：iframe、跨域图片、canvas 自身（会变空白）、video 当前帧、svg 中含外部引用的 或
调用 html2canvas 的最小可行代码和关键参数
最简调用是 html2canvas(element)，但生产环境必须加配置项防翻车：
-
useCORS: true—— 强制跨域图片预加载（否则被 canvas 污染，截图空白） -
allowTaint: false—— 保持默认，设为true会导致部分浏览器拒绝导出（尤其 Chrome） -
scale: window.devicePixelRatio || 1—— 避免高清屏下模糊（不放大则文字发虚） -
logging: false—— 关闭内部 debug 日志，避免干扰控制台
示例：
html2canvas(document.querySelector('#chart'), {
useCORS: true,
scale: window.devicePixelRatio || 1,
logging: false
}).then(canvas => {
document.body.appendChild(canvas); // 插入验证
});
截图后导出 PNG/JPEG 的常见错误
很多人卡在 canvas.toDataURL() 报错或输出黑图，核心原因就两个：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
canvas对象未真正完成绘制（then回调里才能安全调用） - 导出时指定类型不被支持，比如写成
'image/jpg'（正确是'image/jpeg'） - 对含透明背景的元素导出
jpeg，结果背景变黑（jpeg不支持透明）
安全导出写法：
canvas.toDataURL('image/png'); // 默认无损，支持透明
canvas.toDataURL('image/jpeg', 0.9); // jpeg 压缩质量 0~1
为什么截图内容和页面显示不一致
这不是 bug，是 html2canvas 的固有限制机制导致的：
- CSS
transform、filter、clip-path大概率丢失或降级（尤其 Safari） - 字体 fallback 行为不同：若页面用了本地未安装的 webfont，且未等
@font-face加载完就截图，会回退到系统字体 - 伪元素（
::before/::after）需确保 CSS 中有content且非空，否则不渲染 - 滚动容器（
overflow: scroll）只截可视区，除非手动滚动到顶部并设置scrollY: 0
复杂布局建议先用 onclone 钩子微调快照 DOM，比如临时移除动画、补全字体加载逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
