chrome 的部分屏幕截图
Partial screenshot with chrome
我正在尝试构建我的第一个 Chrome 扩展程序，并希望它能够截取屏幕截图。我知道 Chrome 有一个 captureVisibleTab API 来获取屏幕的可见区域。我已经开始工作了。但是，我希望能够截取部分屏幕截图（例如，用户在屏幕上单击并将鼠标拖动到 select 某个矩形内容区域）。这在 Chrome 上如何运作？我没有为此看到 API，但我知道 Awesome Screenshot 和其他一些屏幕截图扩展可以做到这一点。
我正在使用 .mouseup 和 .mousedown 来检测鼠标点击，并使用 event.pageX 和 event.pageY 来获取页面上的坐标。但是，如何让一个矩形显示在页面上？我必须将网页转换为 canvas，但我不太确定该怎么做。此外，一旦我获得 selected 区域，我如何将其转换为图像并获得 dataURI，例如 chrome API 给出的 return 值？
我应该改用其他方式吗？感谢您的帮助！
我建议先生成整体截图 (example for others), then cropping it later based off of the user data you collected. You can crop the image using JavaScript and the HTML5 <canvas> element. (example code)
至于将网页转换为<canvas>元素，截取初始屏幕截图，使用drawImage()功能将其显示在canvas上。
然后，您可以使用“example code", or a library such as cropper中所示的方法在屏幕上为 UI 绘制矩形。
example code还可以告诉你如何把选中的区域变成dataURI。
我正在尝试构建我的第一个 Chrome 扩展程序，并希望它能够截取屏幕截图。我知道 Chrome 有一个 captureVisibleTab API 来获取屏幕的可见区域。我已经开始工作了。但是，我希望能够截取部分屏幕截图（例如，用户在屏幕上单击并将鼠标拖动到 select 某个矩形内容区域）。这在 Chrome 上如何运作？我没有为此看到 API，但我知道 Awesome Screenshot 和其他一些屏幕截图扩展可以做到这一点。
我正在使用 .mouseup 和 .mousedown 来检测鼠标点击，并使用 event.pageX 和 event.pageY 来获取页面上的坐标。但是，如何让一个矩形显示在页面上？我必须将网页转换为 canvas，但我不太确定该怎么做。此外，一旦我获得 selected 区域，我如何将其转换为图像并获得 dataURI，例如 chrome API 给出的 return 值？
我应该改用其他方式吗？感谢您的帮助！
我建议先生成整体截图 (example for others), then cropping it later based off of the user data you collected. You can crop the image using JavaScript and the HTML5 <canvas> element. (example code)
至于将网页转换为<canvas>元素，截取初始屏幕截图，使用drawImage()功能将其显示在canvas上。
然后，您可以使用“example code", or a library such as cropper中所示的方法在屏幕上为 UI 绘制矩形。
example code还可以告诉你如何把选中的区域变成dataURI。