创建一个截图插件

Question

有没有人有一个很好的教程,为Firefox和/或Chrome创建一个简单的屏幕捕获插件？

Answer 1

这是Firefox的一个片段.在你的叠加XUL中添加:

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

然后在你的覆盖javascript中,监听新的文档加载,这个代码片段会将屏幕截图保存到文件中:

    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的信息,以便从数据网址创建一个nsiURI,然后在本地保存它.

Answer 2

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