javascript - chrome 部分截图

Question

我正在尝试构建我的第一个 Chrome 扩展程序，并希望它能够截取屏幕截图。我知道 Chrome 有一个 captureVisibleTab API 来获取屏幕的可见区域。我已经开始工作了。但是，我希望能够截取部分屏幕截图(例如，用户在屏幕上单击并拖动鼠标以选择内容的某个矩形区域)。这在 Chrome 上如何工作？我没有看到这方面的 API，但我知道 Awesome Screenshot 和其他一些屏幕截图扩展可以做到这一点。

我正在使用 .mouseup 和 .mousedown 检测鼠标点击以及 event.pageX 和 event.pageY 获取页面上的坐标。但是，如何让一个矩形显示在页面上？我必须将网页转换为 Canvas ，但我不太确定该怎么做。此外，一旦获得选定区域，如何将其转换为图像并获得 dataURI，就像 chrome API 提供的返回值一样？

我应该改用其他方式吗？感谢您的帮助!

Answer 1

我建议首先生成整体屏幕截图(对于其他屏幕截图为 example)，然后根据您收集的用户数据对其进行裁剪。您可以使用 JavaScript 和 HTML5 裁剪图像 <canvas>元素。 ( example code )

至于将网页转换为 <canvas>元素，截取初始屏幕截图，使用 drawImage() 将其显示在 Canvas 上功能。

然后，您可以使用“example code”中显示的方法，或者像cropper 这样的库。在屏幕上为 UI 绘制矩形。

example code还可以向您展示如何将所选区域变成 dataURI。