html2canvas无法真正全屏截图，仅渲染当前dom结构且默认截视口内区域；截长页面需设scrolly:0、height:node.scrollheight、width:node.scrollwidth，并配合scale提升清晰度。
直接用 html2canvas 或 html-to-image 是最可控、可集成的方案；浏览器原生截图或在线工具只适合临时、单次操作，不能写进业务逻辑。
为什么不用浏览器“全页截图”命令？
它看似最快，但实际有硬伤：无法自动化、不能指定区域、不支持动态渲染内容（比如 Vue/React 组件未挂载完成就截了白屏）、无法控制背景色或缩放比。你点一次 Capture full size screenshot，背后没触发任何 JS 生命周期，document.getElementById('chart') 可能根本还没画出来。
常见错误现象包括：截图空白、文字模糊、CSS 动画卡在中间帧、伪元素（::before/::after）丢失、transform 错位。
- 仅适用于静态 HTML 文件的快速验证
- 不能用于 CI/CD、定时导出、用户点击即生成等真实场景
- 路径必须是
file://或http://，本地开发时若直接双击打开 HTML，Chrome 会因跨域禁止加载字体/CSS
html2canvas 的坑比你想象的多
它把 DOM 渲染成 Canvas，本质是“模拟浏览器绘制”，不是真截图。所以样式兼容性差、性能低、对复杂布局支持弱——尤其遇到 position: fixed、filter、clip-path、Web Font 加载延迟时，极易出错。
实操建议：
- 确保目标节点已完全渲染：用
setTimeout或监听load事件，不要一拿到 DOM 就调html2canvas(node) - 显式设置
useCORS: true，否则跨域图片（如 CDN 上的 avatar）会变黑或报Failed to execute 'toDataURL' on 'HTMLCanvasElement' - 加
logging: false，否则控制台刷满警告（比如不支持的 CSS 属性） - 避免对整个
body截图；优先选一个带id的容器，如<div id="report-section"> <p>简单示例：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;">html2canvas(document.getElementById('report-section'), { useCORS: true, logging: false, scale: window.devicePixelRatio || 2 }).then(canvas => { const link = document.createElement('a'); link.download = 'report.png'; link.href = canvas.toDataURL('image/png'); link.click(); }); </pre> <h3> <code>html-to-image更稳，但得注意依赖和配置它底层也用 Canvas，但封装更细、对现代 CSS 支持更好，尤其是
toSvg和toJpeg分离明确。不过它不处理跨域资源自动降级，也不像html2canvas那样默认尝试加载字体。关键参数差异：
-
quality: 0.95只对toJpeg生效，toPng忽略该字段 -
backgroundColor默认是透明，导出 PNG 时若父容器有背景色，要手动设，否则白底变黑底 -
pixelRatio建议设为window.devicePixelRatio || 2，否则 Retina 屏下图发虚 - 不支持 IE11，且对 Shadow DOM 内容需额外传
includeQuerySelector: 'slot'类似配置
基础调用：
import { toPng } from 'html-to-image'; toPng(document.getElementById('card'), { backgroundColor: '#fff', pixelRatio: window.devicePixelRatio || 2 }) .then(dataUrl => { const img = new Image(); img.src = dataUrl; document.body.appendChild(img); });Python + Selenium 适合批量或服务端生成
当你要导出几十个用户定制报表、或需要 PDF+PNG 双输出、或页面严重依赖 JS 渲染（比如 Three.js 场景），前端方案会力不从心。
selenium启动真实浏览器，能 100% 复现用户看到的画面，但代价是慢、重、难调试。容易踩的坑：
- 本地运行时，
driver.get('file:///...')在 Chrome 119+ 会拒绝加载本地字体，必须走http://localhost:8000 - 截图前务必等关键元素出现：
WebDriverWait(driver, 5).until(EC.presence_of_element_located((By.ID, "chart"))) -
driver.save_screenshot()只截可视区；全页要用driver.execute_script("return document.body.scrollHeight")算高度再滚动截
真正稳定的方案，往往得组合：前端用
html-to-image快速响应用户操作，后端用selenium定时批量导出高保真报告。 -
