How can I change the size of a tab captured with chrome.tabs.captureVisibleTab (Chrome extension)

Question

I'm using the following code to capture a screenshot of the selected tab

chrome.tabs.captureVisibleTab( undefined, function( data ) { display( data ) });

The API says its possible to change the size of the tab ( http://code.google.com/chrome/extensions/tabs.html#method-captureVisibleTab ) but I can't work out how to do it. At the moment all of the screenshots are coming out at full size (1440x900) but I only need them at thumbnail sizes.

Does anyone know how to use this API to do that?

Thanks.

Answer 1

Hello Tom,

The Chrome API doesn't actually provide image sizing of the captureVisibleTab. What that function does, is basically whatever you see is what you get as an image from that tab.

If you want to resize the image for that tab. You can use HTML5 Canvas. http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

You can load the image into a Canvas, and from that canvas, you can resize the image and do whatever you wish with it. You can place the image into the canvas context using drawImage

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#images

Depending on the arguments of drawImage, you can resize it, or you can use other canvas features to clip or crop.

Then once your done resizing your image, you can use the toDataURL to convert it back so you can use it or store it.

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvas-todataurl