JavaScript-Screenshot-Funktionalität in der Chrome-Erweiterung

Question

Ich habe viele Suchanfragen zum Aufnehmen von Bildern mit JS durchgeführt, aber keine davon scheint nützlich zu sein. Einige Leute empfehlen die Verwendung von ActiveX-Steuerelementen, aber das funktioniert in meinem Fall nicht. Ich möchte in der Lage sein, ein Foto aufzunehmen und es mithilfe von JS auf den Server hochzuladen.

Answer 1

我不确定在原回答给出时是否已经提供了这个功能，但是现在Google已经提供了一个示例，展示了如何进行屏幕截图：

http://developer.chrome.com/extensions/samples.html

在这个页面上搜索“Test Screenshot Extension”。

更新：这是一个使用desktopCapture API的新示例：

https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/apps/samples/desktop-capture

Answer 2

由于您在Chrome扩展中使用此功能，Tab API有一个名为captureVisibleTab的方法，它允许捕获指定窗口中当前选定标签的可见区域。

要使用该方法，只需将"tabs"添加到您的权限清单中。然后从您的背景页、弹出窗口（或任何其他扩展页）中，只需像这样调用该方法：

chrome.tabs.captureVisibleTab(null, {}, function (image) {
   // 您可以将该图像添加到HTML5画布或元素中。
});

您可以通过添加{quality: 50}来控制属性，并且还可以更改格式，所有这些都在上述文档中有详细描述。

HTML5的美妙之处在于，您可以使用HTML5 Canvas来修改该图像，您可以轻松地进行操作、转换、修改、裁剪等任何操作！

希望这正是您所寻找的！新年快乐！