html2canvas能截取任意DOM元素，但仅限当前文档内已挂载且具可计算样式的元素；不支持iframe、跨域图片、video帧、含外部引用的SVG等，其原理是重建渲染树而非所见即所得。
html2canvas 能不能直接截取任意 DOM 元素
能，但有严格限制：只支持渲染「当前文档内、已挂载、可计算样式」的元素。常见失败场景包括：iframe、跨域图片、canvas 自身（会变空白）、video 当前帧、svg 中含外部引用的 <use></use> 或 <image></image>。不是“所见即所得”，而是重建渲染树再绘图。
调用 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() 报错或输出黑图，核心原因就两个：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
-
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，比如临时移除动画、补全字体加载逻辑。
