使用chrome的部分屏幕截图

Question

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

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

我应该以其他方式这样做吗？谢谢你的帮助！

Answer 1

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

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

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

example code还可以向您展示如何将所选区域转换为dataURI。