JavaScript screenshot functionality in Chrome extension

Question

I've done a lot of searches about taking pictures using JS, but none of them seem to be useful. Some people say to use ActiveX controls, but that doesn't work for my case. I want to be able to take a photo and upload it to the server using JS.

Answer 1

I'm not sure if this feature was already available when the original answer was given, but now Google has provided an example showing how to take a screenshot:

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

Search for "Test Screenshot Extension" on this page.

Update: Here is a new example using the desktopCapture API:

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

Answer 2

Since you are using this feature in a Chrome extension, the Tab API has a method called captureVisibleTab which allows capturing the visible area of ​​the currently selected tab in the specified window.

To use this method, simply add "tabs" to your permissions manifest. Then from your background page, popup (or any other extension page), just call the method like this:

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

You can control the properties by adding {quality: 50}, and also change the format, all of which are described in detail in the above documentation.

The beauty of HTML5 is that you can use HTML5 Canvas to modify this image. You can easily manipulate, convert, modify, crop, and more!

Hope this is what you are looking for! Happy New Year!