创建屏幕截图插件[关闭]答案

【问题标题】：Creating a Screenshot Plugin [closed]创建屏幕截图插件[关闭]
【发布时间】：2011-09-08 19:35:11
【问题描述】：

有没有人有关于为 Firefox 和/或 Chrome 创建一个简单的屏幕截图插件的好教程？

【问题讨论】：

在addons.mozilla.org/en-us/firefox/addon/tab-preview的源代码中可以找到一些示例代码

标签： firefox-addon google-chrome-extension screen-capture

【解决方案1】：

这是 Firefox 的 sn-p。在您的叠加 XUL 中添加：

    <html:canvas id="my-canvas" style="display: none;" />

然后在你的覆盖 javascript 中，listen for new document loads 这个 sn-p 会将屏幕截图保存到一个文件中：

    var canvas = document.getElementById('my-canvas');
    var context = canvas.getContext('2d');

    //Find the window dimensions
    canvas.height = doc.defaultView.innerHeight; //doc is the content document that you listened for
    canvas.width = doc.defaultView.innerWidth;

    context.drawWindow(doc.defaultView, 0, 0, canvas.width, canvas.height, "rgba(0,0,0,0)");

    //Create a data url from the canvas
    var dataUrl = canvas.toDataURL("image/png");

了解 nsiIOService 和 nsiWebBrowserPersist 以从数据 url 创建一个 nsiURI，然后将其保存在本地。

【讨论】：

【解决方案2】：

有一个关于如何使用 Chrome http://code.google.com/chrome/extensions/dev/samples.html#e1697cacebad05218798bf3e8a0f724517f0e8c3 进行此操作的示例扩展

【讨论】：

【解决方案3】：

不确定 Firefox，但在 Chrome 扩展程序中，您可以使用chrome.tabs.captureVisibleTab() 捕获标签，这将返回Data URI 格式的图像。之后，如果需要，您将能够使用 Canvas 元素操作图像。

【讨论】：