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
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!