html2canvas并非真截屏，而是遍历DOM、计算样式并重绘到canvas导出图片；不支持iframe和伪元素，默认跳过::before/::after，跨域图片需useCORS+allowTaint，长页面需手动设scrollY=0及scrollHeight/scrollWidth。
前端没有原生的页面截图 API，所有“点一下就保存图片”的功能，都得靠 html2canvas 或 dom-to-image 这类库模拟渲染——不是真截屏幕，而是把 DOM 重画一遍再导出。想用浏览器 DevTools 里那个 Capture full size screenshot 命令？它只在调试面板里有效，业务代码里调用会直接报 Cannot read property 'sendMessage' of undefined。
html2canvas 截不到 iframe 和伪元素？这是设计使然
html2canvas 的工作方式是遍历 DOM、计算样式、逐个绘制到 <canvas> 上，所以天然不处理 <iframe> 内容（哪怕同域），也默认跳过 ::before / ::after。常见表现就是截图区域留白、图标消失、跨域图片变灰块。
- 要让伪元素出现，必须同时启用
allowTaint: true和useCORS: true，v1.4+ 还建议加foreignObjectRendering: true，但含content: url()的仍可能丢失 -
<iframe>完全无解——不能渲染，也不能 fallback；得提前把 iframe 里的内容内联或用 API 拉取后塞进真实 DOM - 跨域图片即使服务端配了
Access-Control-Allow-Origin: *，前端也必须加useCORS: true+allowTaint: true，否则toDataURL()直接抛SecurityError
滚动长页面只截了一屏？得手动算 scrollHeight 和 scrollY
默认情况下，html2canvas 只截目标节点当前视口可见部分。哪怕节点设置了 overflow-y: scroll，也不会自动滚到底部拼接。要截完整内容，必须显式控制尺寸和偏移。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
scrollY必须设为0，否则可能从当前滚动位置开始截，顶部大片空白 -
height要用node.scrollHeight，不是clientHeight或offsetHeight -
width推荐用node.scrollWidth，避免横向压缩或截断 - 配合
scale: 2提升清晰度，但内存占用翻倍，低端安卓机容易卡死或崩溃
中文文件名下载乱码？saveAs 的 filename 参数必须编码
直接写 saveAs(blob, '我的截图.png') 在 Windows Chrome 下大概率变成 ???.png。这不是前端 bug，而是 Blob URL 的 filename 参数没做 URI 编码导致的解析失败。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是：
saveAs(blob, encodeURIComponent('我的截图.png')) - 如果环境不支持
saveAs（比如漏引FileSaver.js），降级用window.navigator.msSaveOrOpenBlob（仅 IE/Edge Legacy） -
domtoimage.toPng()返回的是 Promise，必须链.then(blob => saveAs(blob, ...))，漏掉.then就没反应
真正难的从来不是写几行 html2canvas()，而是等字体加载完、等 Vue/React 组件 render 完、等 SVG 图标解析完成、等 CSS 变量计算完毕——这些异步时机一旦错位，截图就是空白或错位。加个 setTimeout(() => screenshot(), 500) 有时比改十行配置更管用。
