BOM 不提供截屏功能，因其设计目标是浏览器窗口管理而非图形操作；真实截屏需依赖 html2canvas、getDisplayMedia 或服务端工具如 Puppeteer。
JavaScript 的 BOM（Browser Object Model）本身不提供直接截屏或生成图片的原生 API。`window`、`screen`、`location`、`history` 等 BOM 对象主要用于浏览器窗口控制、导航和环境信息获取，没有 captureScreen()、takeScreenshot() 或类似方法。
为什么 BOM 无法直接截屏
BOM 设计初衷是管理浏览器窗口与用户交互，而非图形操作。截图涉及像素级访问页面渲染结果，这属于敏感操作，需明确用户授权，并由更底层的渲染引擎支持——这类能力被划归到 Web APIs（如 Canvas、MediaDevices）而非 BOM。
实际可行的替代方案（基于标准 Web API）
虽然 BOM 不行，但可通过组合以下标准 API 实现“页面截屏”效果：
-
html2canvas：纯前端库，将 DOM 元素（如
document.body）渲染为 canvas，再导出为 PNG/JPEG。
→ 适合静态内容，不支持 iframe 跨域、部分 CSS3 动画、video 实时画面。 - Canvas + drawWindow（已废弃）：Firefox 曾有私有 API，但已被移除，不可用。
-
MediaDevices.getDisplayMedia()：捕获当前标签页/整个屏幕（需用户手动选择并授权），返回 MediaStream，可配合
canvas.captureStream()+MediaRecorder录制，或逐帧绘制到 canvas 后导出单帧。
→ 真实截屏，支持动态内容，但必须由用户主动触发（如点击按钮），且仅限同源页面或安全上下文（HTTPS）。 -
服务端渲染 + 截图（如 Puppeteer）：在 Node.js 环境中用无头浏览器加载页面并截图，前端通过 API 请求结果。
→ 最可靠，支持完整 CSS/JS 渲染，但依赖后端，非纯前端方案。
一个最小可用示例（使用 html2canvas）
无需后端，适合快速原型：
立即学习“Java免费学习笔记（深入）”；
注意：需先引入https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js
document.getElementById('screenshot-btn').addEventListener('click', async () => {
const canvas = await html2canvas(document.body);
const imgData = canvas.toDataURL('image/png'); // 得到 base64 图片
const link = document.createElement('a');
link.download = 'page-screenshot.png';
link.href = imgData;
link.click();
});
关键限制与注意事项
- CORS 图片、跨域 iframe 内容会被 canvas 污染，导致
toDataURL()报错；需服务端代理或同源资源。 - 滚动位置、固定定位元素可能截取不全；建议先
window.scrollTo(0, 0)并用{ scrollY: 0 }配置 html2canvas。 - getDiplayMedia 是唯一能捕获视频、WebGL、音频可视化等真实渲染内容的方式，但用户体验上需弹出系统选择框。
- 移动端 Safari 对 html2canvas 和 getDisplayMedia 支持有限，需降级处理。
不复杂但容易忽略：所谓“BOM 截屏”是个常见误解。真正可用的方案都建立在 Canvas、Media API 或服务端工具之上，BOM 只负责触发（比如监听按钮点击、获取窗口尺寸），不参与图像生成本身。
