如何用HTML实现网页全屏截图并转换为图像？

本文共计847个文字，预计阅读时间需要4分钟。

当然可以，请您提供需要改写的原文，我将根据您的要求进行修改。

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> 内容（同域也不行），也捕获不到 <video> 当前画面（除非用 captureStream() + CanvasRenderingContext2D.drawImage()）。

• iframe：只能分别截图其 contentDocument（需同域），再手动拼接；跨域 iframe 无解
• 视频帧：用 video.captureStream().getVideoTracks()[0] 获取轨道，再用 MediaRecorder 或逐帧 draw 到 canvas
• 真“屏幕级”截图：仅限扩展环境，调 chrome.tabs.captureVisibleTab；网页脚本无法调用

真正难的不是调哪个 API，而是判断“你到底要截什么”——DOM 结构？可视层像素？还是原始画面信号？选错路径，后面全是补丁。