部分铬屏幕截图
部分铬屏幕截图
提问于 2015-07-12 20:08:42
我正在尝试构建我的第一个Chrome扩展，并希望它能截图。我知道Chrome有一个captureVisibleTab API来获取屏幕的可见区域。我已经让它起作用了。但是，我想要能够拍摄部分截图(例如。用户单击并拖动屏幕上的鼠标，以选择特定的矩形内容区域)。如何在Chrome上工作呢？我没有看到这方面的API，但我知道可怕的屏幕截图和其他一些屏幕快照扩展可以做到这一点。
我使用.mouseup和.mousedown来检测鼠标点击，使用event.pageX和event.pageY来获取页面上的坐标。但是，如何在页面上显示一个矩形呢？我必须将网页转换成画布，但我不太确定如何做到这一点。而且，一旦我得到选定的区域，如何将其转换为图像并获得dataURI，就像chrome给出的返回值一样？
我是不是该用别的方法来代替？谢谢你的帮忙!
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-07-12 22:34:00
我建议首先生成整个屏幕截图(其他人的示例)，然后根据收集到的用户数据进行裁剪。可以使用JavaScript和HTML5 <canvas>元素对图像进行裁剪。(示例代码)
至于将网页转换为<canvas>元素，使用drawImage()函数进行初始屏幕截图，在画布上显示。
然后，可以使用"示例代码“中显示的方法，也可以使用库(如克罗珀 )在屏幕上为UI绘制矩形。
示例代码还可以向您展示如何将选定的区域转换为dataURI。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31372068
复制相关文章
相似问题
腾讯云开发者
