Screen Capture API是唯一符合W3C标准的原生真实屏幕捕获方案，需用户显式触发getDisplayMedia()并配置video: {cursor: "always"}；DOM截图用html2canvas（注意跨域与高清适配）；长页截图须DOM遍历+滚动拼接。
Screen Capture API 本身不支持“原始屏幕录制”，它只提供 getDisplayMedia() 获取屏幕媒体流，用于截图或录屏前端逻辑；而 DOM 截图属于完全不同的技术路径——不能混用。高性能实现需按目标严格区分：要录屏就走 MediaStream + MediaRecorder；要截当前页面就用 html2canvas 或 dom-to-image；要截完整长页则必须结合 DOM 遍历与滚动拼接。
用 Screen Capture API 做真实屏幕截图（非 DOM）
这是唯一符合 W3C 标准、能捕获桌面/窗口/标签页内容的原生方案，适合需要真实屏幕画面的场景（如远程协作、教学演示）。
- 必须由用户显式点击触发，
navigator.mediaDevices.getDisplayMedia()才会弹出系统级授权框 - 推荐配置：
{ video: { cursor: "always" }, audio: false }，避免音频权限干扰，确保光标可见 - 拿到
MediaStream后，必须创建<video>并调用play()，否则video.videoWidth/Height为 0 - 绘制前加
setTimeout(..., 300)或监听video.onplaying，防止帧未就绪导致黑图 - 截图后务必调用
stream.getTracks().forEach(t => t.stop())，否则浏览器地址栏持续显示“正在共享”红条
用 html2canvas 实现高保真 DOM 截图
适用于静态或轻交互页面，能保留 CSS 样式、字体、阴影等渲染效果，但不支持跨域图片、iframe 内容和部分 SVG。
- 对含 Canvas、WebGL 的区域，需启用
useCORS: true并确保资源允许跨域 - 设置
scale: window.devicePixelRatio可提升高清屏截图清晰度 - 禁用滚动条干扰：
scrollY: 0, scrollX: 0, allowTaint: true - 长页面建议分块截图再拼接，避免内存溢出（尤其在低端设备）
用 Full Page Screen Capture 思路解决长页完整截图
传统滚动截图易漏懒加载内容、拼接错位。真正可靠的方案依赖 DOM 结构测绘：
- 先递归遍历整个 DOM 树，用
getBoundingClientRect()记录每个区块位置与尺寸 - 识别懒加载区域（如
loading="lazy"图片、IntersectionObserver 监听元素），主动触发其加载 - 按顺序滚动到各区块顶部，逐段截图，用 Canvas 合成最终大图
- 合成时注意处理 fixed 定位元素（如导航栏），需在每段截图中单独叠加
性能关键点总结
不追求“一招鲜”，而要根据需求选对工具链：
- 要录系统屏幕 →
getDisplayMedia() + MediaRecorder，输出 WebM/MP4 - 要截当前可视区 DOM →
html2canvas，控制 scale 和 timeout 防卡顿 - 要截整页（含动态内容）→ 自研 DOM 遍历 + 滚动 + 多段 canvas 合成
- 绝对避免在主线程长时间运行截图逻辑，大页面务必用
requestIdleCallback或 Web Worker 卸载计算
