部分屏幕截图与铬
问题描述:
我想建立我的第一个Chrome扩展,并希望它采取截图。我知道Chrome有一个captureVisibleTab API来获取屏幕的可见区域。我已经得到这个工作。但是,我希望能够进行部分屏幕截图(例如用户点击并在屏幕上拖动鼠标以选择某个矩形区域的内容)。这在Chrome上如何工作?我没有看到此API的API,但我知道Awesome Screenshot和其他一些屏幕截图扩展可以做到这一点。部分屏幕截图与铬
我使用.mouseup
和.mousedown
来检测鼠标点击,并且使用event.pageX
和event.pageY
来获取页面上的坐标。但是,如何获得一个矩形显示在页面上?我必须将网页转换为画布,但我不太清楚如何做到这一点。另外,一旦我得到选定的区域,我该如何将其转换为图像并获取dataURI,就像Chrome API提供的返回值一样?
我应该用其他方式来改变它吗?谢谢你的帮助!
答
我会建议首先生成整个屏幕截图(example),然后根据您收集的用户数据进行裁剪。您可以使用JavaScript和HTML5 <canvas>
元素裁剪图像。 (example code)
至于将网页转换为<canvas>
元素,请采用初始屏幕快照,使用drawImage()
函数将其显示在画布上。
然后,您可以使用“example code”中显示的方法或cropper等库在UI屏幕上绘制矩形。
example code也可以告诉你如何将选定的区域变成dataURI。
有现有的s.o.显示如何转换为画布的问题。 –