Home  >  Q&A  >  body text

JavaScript screenshot functionality in Chrome extension

<p>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. </p>
P粉085689707P粉085689707446 days ago651

reply all(2)I'll reply

  • P粉302160436

    P粉3021604362023-08-23 15:33:37

    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

    reply
    0
  • P粉078945182

    P粉0789451822023-08-23 14:37:10

    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!

    reply
    0
  • Cancelreply