html2canvas默认只截视口内内容，需配合window.scrollTo()分段滚动截图并拼接；scrollY参数仅影响元素可见性判断，不改变实际滚动位置。
用 window.scrollTo() + html2canvas 滚动截全屏
直接调用 html2canvas 对整个 document.body 截图，大概率只截到视口内内容——它默认不处理滚动位置变化。必须手动滚动到每个区域再逐段截图，最后拼接。
常见错误是只执行一次 html2canvas(document.body)，结果顶部以下全是白块或截断。这是因为 html2canvas 不感知滚动偏移，也不自动滚动页面。
- 先用
window.scrollTo(0, 0)确保从顶部开始 - 记录页面总高度：
document.documentElement.scrollHeight - 每次滚动固定高度（如
window.innerHeight * 0.8），留出重叠区防拼接错位 - 每滚一次，等
requestAnimationFrame确保渲染完成，再调html2canvas - 把返回的
canvas元素按 y 坐标叠加到一张新 canvas 上
html2canvas 的 scrollY 参数不起作用？
很多人试过传 { scrollY: -100 } 想强行偏移，但无效——这个参数只在内部计算元素可见性时参考，**不改变实际滚动位置**，也不影响截图范围。它不是“截图偏移”，而是“判断是否该画这个元素”的阈值辅助项。
真正控制截图哪一块，只取决于当前 window.scrollY 和元素自身是否在视口内（受 ignoreElements、useCORS 等影响）。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须用
window.scrollTo(0, targetY)或element.scrollIntoView()主动滚动 -
scrollY选项仅用于微调“哪些元素算可见”，比如防止因滚动抖动漏掉刚进入视口的导航栏 - 如果页面有
position: sticky头部，记得在每次截图前用getBoundingClientRect()检查其 top 值是否为 0，否则可能被截成多份
遇到 CORS 错误导致图片空白？
只要页面里有跨域图片（比如 CDN 上的 <img src="https://xxx.com/a.jpg">），html2canvas 就会因 canvas 被污染而拒绝导出，控制台报 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
这不是 bug，是浏览器安全限制。绕过方法有限且有代价：
- 服务端代理：把所有图片请求走自己后端，加
Access-Control-Allow-Origin: *（最稳，但要改部署） - 前端 fallback：用
crossOrigin: "anonymous"初始化img元素，并确保图片服务器返回正确 CORS header（很多 CDN 默认不配） - 降级处理：捕获
html2canvasreject，对失败区域用纯色块或占位文字代替（适合内部工具） - 完全避免：用
background-image替代<img>，并转成内联 base64（仅适用于小图）
移动端长截图更麻烦？
iOS Safari 对 html2canvas 支持差，尤其遇到 transform、will-change 或 WebKit-only 属性时容易白屏；安卓部分 WebView 则会因内存不足直接崩溃。
关键差异点：
- 不要依赖
window.devicePixelRatio盲目放大 canvas 分辨率，iOS 会卡死——建议统一用scale: 1截图，后期再用 CSS 缩放展示 - 禁用
logging: true，移动端 console 输出本身就会拖慢渲染 - 滚动时用
{ behavior: "instant" }，避免"smooth"触发长时间动画阻塞截图时机 - 对
iframe内容，无法跨域截图，只能忽略或提示“此区域未包含在截图中”
真要稳定支持移动长截图，得接受妥协：放弃 100% 还原，优先保可用性。比如跳过非关键区域、限制最大截图高度（如 5000px）、加 loading 遮罩防用户误操作。这些细节，比选哪个库更重要。
