html2canvas 无法真正导出网页为图片，仅对 DOM 快照渲染，因不走浏览器真实渲染管线，故不支持 iframe、跨域资源、CSS3D、SVG 外引及 JS 动态内容。
html2canvas 不能真正“导出网页为图片”，它只是对 DOM 进行快照式渲染，遇到 iframe、跨域资源、CSS3D 变换、SVG 外部引用等会直接失效或留白。
为什么 html2canvas 渲染结果和浏览器显示不一致
根本原因是 html2canvas 不走真实浏览器渲染管线，而是用 JS 模拟 CSS 解析 + Canvas 绘制。它无法执行 JavaScript 渲染逻辑（比如 Vue/React 的动态 DOM），也不能加载跨域 <img> 或 <iframe> 内容，更不会触发 @media print 规则。
- 常见错误现象：
html2canvas is not defined（没正确引入）、空白画布（DOM 未挂载完就调用）、文字模糊（设备像素比未适配）、按钮状态丢失（JS 修改的 class 或 style 未被 capture） - 使用场景建议：仅用于静态内容快照，比如表单预览页、数据看板局部截图、带样式的 HTML 报告摘要
- 关键参数必须设：
useCORS: true（允许同源图片跨域加载）、scale: window.devicePixelRatio（避免模糊）、logging: false（生产环境关日志）
如何处理 canvas 导出为 PNG/JPEG 文件
html2canvas 返回的是 Promise<HTMLCanvasElement>，后续导出靠原生 toDataURL() 或 toBlob() —— 但注意 Safari 对 toBlob() 支持较晚，且 download 属性在 iOS Safari 完全无效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 推荐写法：
html2canvas(element, { useCORS: true, scale: window.devicePixelRatio }).then(canvas => { const link = document.createElement('a'); link.download = 'snapshot.png'; link.href = canvas.toDataURL('image/png'); link.click(); }); - 如果要 JPEG 且控制质量，用
canvas.toDataURL('image/jpeg', 0.9)；但注意透明背景会被强制转成黑底 - 大图导出可能卡顿甚至 OOM，建议加
timeout: 10000防止无限等待
哪些样式会让 html2canvas 直接失败
不是所有 CSS 都能被解析。html2canvas v1.4+ 支持大部分 Flex/Grid，但以下仍属高危项：
立即学习“前端免费学习笔记（深入）”；
-
transform: translateZ(0)或任何perspective/rotate3d—— 整个元素消失 -
background: url(data:image/svg+xml;base64,...)—— SVG 字符串若含未编码的#或空格，解析中断 -
filter: blur(2px)—— 被忽略，但filter: opacity(0.8)可用 -
position: fixed元素默认不参与渲染，需手动设置scrollY: 0并确保目标区域在视口内
最常被忽略的一点：html2canvas 必须在目标 DOM 已完成 layout 后调用 —— 如果页面刚加载完就立刻执行，且内容依赖异步图片或字体加载，结果大概率是错位或缺失。稳妥做法是监听 fontfaceobserver + imagesLoaded，或用 setTimeout(..., 100) 做简单兜底，但别依赖它。
