部分屏幕截图与铬

我想建立我的第一个Chrome扩展，并希望它采取截图。我知道Chrome有一个captureVisibleTab API来获取屏幕的可见区域。我已经得到这个工作。但是，我希望能够进行部分屏幕截图（例如用户点击并在屏幕上拖动鼠标以选择某个矩形区域的内容）。这在Chrome上如何工作？我没有看到此API的API，但我知道Awesome Screenshot和其他一些屏幕截图扩展可以做到这一点。部分屏幕截图与铬

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

我应该用其他方式来改变它吗？谢谢你的帮助！

来源

2015-07-12 llams48

有现有的s.o.显示如何转换为画布的问题。 –

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

至于将网页转换为<canvas>元素，请采用初始屏幕快照，使用drawImage()函数将其显示在画布上。

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

example code也可以告诉你如何将选定的区域变成dataURI。

来源

2015-07-12 22:34:00 andrewgu

作为一般说明，仅链接到示例代码是不好的。这里有很多示例，因此将所有内容复制都是不切实际的或潜在的版权问题，但至少要为每个示例添加一两个描述方法。 – Xan

@ fond42518感谢您的帮助和详细的例子！我了解如何从您提供的链接调整大小。但是，我仍然不确定如何让起始和结束坐标的矩形显示在原始网页上。我希望它与其他屏幕截图扩展的UI类似（例如Awesome Screenshot）。我怎样才能让网页变灰，并在网页上显示网格指针和矩形选区？这就是我将网页转换为画布的意思。我不想在另一个选项卡上创建画布，然后调整大小。 – llams48

部分屏幕截图与铬

回答

相关问题