在前端开发中，经常需要对网页进行截屏操作，以便于展示给其他人或者记录下来。Chrome 浏览器提供了一种非常简单的方式来实现滚动截屏（包括 PC 端、移动端和部分截图）。本文将详细介绍如何使用 Chrome 浏览器实现滚动截屏，包括工具的选择、基本用法和一些技巧。
工具的选择
Chrome 浏览器自带的截屏工具可以实现简单的截图功能，但是不支持滚动截图。因此，在这里我们选择一个第三方插件：Full Page Screen Capture。
该插件具有以下特点：
- 可以在 Windows、macOS 和 Linux 系统上使用。
- 不需要任何其他软件或插件支持。
- 可以捕捉整个页面或局部页面的截图。
安装插件
在 Chrome 浏览器中打开扩展程序界面，方法为点击浏览器右上角的三个点按钮，再选择“更多工具”>“扩展程序”。
在弹出的扩展程序窗口中，在搜索框中输入“Full Page Screen Capture”，然后按下回车键。找到该插件后，点击“添加至 Chrome”按钮。
等待插件下载并安装完成后，就可以在浏览器的地址栏右侧看到 Full Page Screen Capture 的图标了。
使用插件
打开需要截屏的页面，并确保所有内容都已经加载完毕。
点击 Full Page Screen Capture 图标，选择“Capture Whole Page”（截取整个页面）或者“Capture Visible Portion”（截取当前可见部分）。
插件开始进行截屏操作。截屏完成后，会自动打开一个新的选项卡，并将截屏图片显示在其中。
如果需要保存截屏图片，可以右键点击图片，选择“另存为”来保存图片到本地。
高级用法
设置快捷键：在 Chrome 浏览器的扩展程序管理界面中，找到 Full Page Screen Capture，并点击“详细信息”。然后，在“键盘快捷键”一栏中，设置你喜欢的快捷键。
选择截屏文件类型：默认情况下，Full Page Screen Capture 会将截屏文件保存为 PNG 格式。如果需要将其保存为其他格式（如 JPEG），可以在插件选项中进行设置。
示例代码
HTML 代码：
<body> <h1>这是一个标题</h1> <p>这是一段文本。</p> <div style="height: 2000px;"></div> <p>这是一段位于底部的文本。</p> </body>
JavaScript 代码：
// 点击按钮进行截屏 document.querySelector('#capture-btn').addEventListener('click', function() { chrome.extension.sendMessage({command: 'capture'}, function(response) { console.log(response.result); }); });
说明：上面的 JavaScript 代码是一个简单的示例，展示了如何在 Chrome 扩展程序中调用 Full Page Screen Capture 插件进行截屏操作。具体实现方法可以参考插件的 API 文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36372
