html - 如何更改使用 chrome.tabs.captureVisibleTab(Chrome 扩展)捕获的选项卡的大小

Question

我正在使用以下代码来捕获所选选项卡的屏幕截图

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

API 表示可以更改选项卡的大小 ( http://code.google.com/chrome/extensions/tabs.html#method-captureVisibleTab )，但我不知道该怎么做。目前，所有屏幕截图均以完整尺寸 (1440x900) 显示，但我只需要缩略图尺寸。

有谁知道如何使用这个 API 来做到这一点？

谢谢。

Answer 1

Chrome API 实际上并不提供 captureVisibleTab 的图像大小。该功能的作用基本上就是您所看到的就是您从该选项卡中获得的图像。

如果您想调整该选项卡的图像大小。您可以使用 HTML5 Canvas 。 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

您可以将图像加载到 Canvas 中，然后从该 Canvas 中，您可以调整图像的大小并对其进行任何您想做的事情。您可以使用 drawImage

将图像放入 Canvas 上下文中

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

根据 drawImage 的参数，您可以调整它的大小，或者您可以使用其他 Canvas 功能进行裁剪。

然后，一旦您调整完图像大小，就可以使用 toDataURL 将其转换回来，以便您可以使用或存储它。

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