html2canvas无法真正全屏截图，它仅渲染当前dom结构且默认截视口内区域；要截长页面需手动设置scrolly:0、height:node.scrollheight、width:node.scrollwidth，并配合scale提升清晰度。
html2canvas 无法真正“全屏截图”，它只渲染当前 DOM 结构，且默认只截视口内区域；要截长页面或滚动内容，必须手动控制宽高、缩放与滚动偏移。
html2canvas 截不到完整滚动内容？用 scrollY 和 height 强制拉平
默认情况下，html2canvas 只渲染元素在当前视口中的部分，哪怕目标节点有 overflow-y: scroll 或内容超出窗口高度，也会被裁掉。
-
scrollY必须显式设为0（否则可能从当前滚动位置开始截，导致顶部空白） -
height要设为目标节点的scrollHeight，不能用clientHeight或offsetHeight -
width建议设为node.scrollWidth，避免横向压缩或截断 - 配合
scale: 2提升清晰度，但会增大内存占用，移动端慎用
示例：
html2canvas(node, {
scrollY: 0,
width: node.scrollWidth,
height: node.scrollHeight,
scale: 2
}).then(canvas => { /* ... */ });
跨域图片/字体空白？useCORS: true 不够，还得加 allowTaint: true
遇到截图里图片变黑、文字缺失、CSS 字体不显示，大概率是跨域资源被 canvas 污染策略拦截 —— 即使服务端已配 Access-Control-Allow-Origin: *，前端仍需主动声明允许污染。
-
useCORS: true仅让Image对象发起带 CORS 的请求 -
allowTaint: true才允许把跨域图片绘制到 canvas 上（否则toDataURL()报错SecurityError） - 二者必须同时启用，缺一不可
- 注意：
allowTaint: true在某些浏览器（如 Safari）下仍可能失效，此时需服务端代理图片
伪元素（::before/::after）不显示？别信默认行为
html2canvas 默认跳过所有 CSS 伪元素，即使同域、无跨域问题也不会渲染。
- 必须加
logging: true看控制台是否提示Ignoring pseudo-element - 启用伪元素需组合配置：
allowTaint: true+useCORS: true+foreignObjectRendering: true（v1.4+） - 即便如此，复杂嵌套或含
content: url(...)的伪元素仍可能丢失 - 更稳方案：把伪元素逻辑提前转成真实 DOM 节点再截图
想截 iframe 或 WebRTC 视频帧？换思路，别硬刚 html2canvas
html2canvas 完全不支持 <iframe></iframe> 内容（同域也不行），也捕获不到 <video></video> 当前画面（除非用 captureStream() + CanvasRenderingContext2D.drawImage()）。
- iframe：只能分别截图其
contentDocument（需同域），再手动拼接；跨域 iframe 无解 - 视频帧：用
video.captureStream().getVideoTracks()[0]获取轨道，再用MediaRecorder或逐帧 draw 到 canvas - 真“屏幕级”截图：仅限扩展环境，调
chrome.tabs.captureVisibleTab；网页脚本无法调用
真正难的不是调哪个 API，而是判断“你到底要截什么”——DOM 结构？可视层像素？还是原始画面信号？选错路径，后面全是补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
