I have made a lot of search regarding taking pictures using JS but none seem to be useful. Some say using activeX controls, which doesn't suit my situation. I was hoping to take picture using JS and upload it a server.
Just visit a website, click on the Make a Screenshot icon in your Chrome and the screenshot is ready. It will be visible in a new tab and then you can right-click the picture and save it. This screenshot extension is very small and quick. You can test it now.
A screenshot of any element in JavaScript can be taken using the html2canvas library. This library can be downloaded from its official website.
Since you're using this in Chrome Extensions, the Tab API has a method called captureVisibleTab, which allows captures the visible area of the currently selected tab in the specified window.
To use that you just add "tabs" to your permissions manifest. And from your background page, or popup (or any other extension page), you just call that method like this:
chrome.tabs.captureVisibleTab(null, {}, function (image) { // You can add that image HTML5 canvas, or Element. });
You can control the property by adding {quality: 50} and change the format too, all described within the docs mentioned above.
The beauty of HTML5, you can alter that image with HTML5 Canvas, you can manipulate, transform, modify, clip, anything you want, very easily!
Hope that is what your looking for! Happy New Years!
I'm not sure if this was available when the original answer was given, but Google now has an example available that shows how to take screenshots:
http://developer.chrome.com/extensions/samples.html
Search for "Test Screenshot Extension" on this page.
UPDATE: Here's the new example using the desktopCapture
API:
https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/apps/samples/desktop-capture
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With