将屏幕截图功能添加到 Firefox 扩展答案

【问题标题】：Adding screenshot functionality to a firefox extension将屏幕截图功能添加到 Firefox 扩展
【发布时间】：2013-05-09 07:41:42
【问题描述】：

是否有跨平台的方法从 Firefox 扩展中截取屏幕截图？

理想情况下，我希望能够截取 dom 元素的屏幕截图（无论它是否在页面上可见），例如：

var screenshot = screenshot(document.getElementById('example');

任何指针或建议都会很好，搜索 https://developer.mozilla.org/ 只会产生他们在各种指南中使用过的屏幕截图。

【问题讨论】：

标签： firefox firefox-addon screenshot

【解决方案1】：

检查了几个扩展的代码。我采用了以下方法（拍摄特定 dom 元素的快照）。这可以在 Firefox 扩展中用于截取整个页面、截取浏览器窗口以及截取特定 dom 元素（及其所有子节点）的截图：

将画布添加到 xul。
查找元素的尺寸和左上角坐标。
将窗口的一部分复制到画布上。
将画布转换为 base64 PNG 文件。

function getElementScreenshot(elm) {
    var x = findPosX(elm);
    var y = findPosY(elm);
    var width = elm.clientWidth;
    var height = elm.clientHeight;
    var cnvs = document.getElementById("aCanvas");
    cnvs.width = width;
    cnvs.height = height;
    var ctx = cnvs.getContext("2d");
    // To take a snapshot of entire window
    // ctx.drawWindow(mainWindow.content, 0, 0, mainWindow.innerWidth, mainWindow.innerHeight, "rgb(255,255,255)");
    ctx.drawWindow(mainWindow.content, x, y, width, height, "rgb(255,255,255)");
    return(cnvs.toDataURL());
}

查找元素的左上角坐标

function findPosX(obj) {
    var curleft = 0;
    if (obj.offsetParent) {
        while (1) {
            curleft += obj.offsetLeft;
            if (!obj.offsetParent) {
                break;
            }
            obj = obj.offsetParent;
        }
    } else if (obj.x) {
        curleft += obj.x;
    }
    return curleft;
}

function findPosY(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        while (1) {
            curtop += obj.offsetTop;
            if (!obj.offsetParent) {
                break;
            }
            obj = obj.offsetParent;
        }
    } else if (obj.y) {
        curtop += obj.y;
    }
    return curtop;
}

从侧边栏访问 browser.xul

var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
                       .getInterface(Components.interfaces.nsIWebNavigation)
                       .QueryInterface(Components.interfaces.nsIDocShellTreeItem)
                       .rootTreeItem
                       .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
                       .getInterface(Components.interfaces.nsIDOMWindow);

mainWindow.gBrowser.addTab(...);

【讨论】：

感谢您在此处发布回复 :)
这个解决方案效果很好，虽然在youtube上播放flash视频时，如果你拿SS，它会显示黑框而不是视频捕获。这个问题有解决办法吗？
@Ivan：你能把它作为插件上传到某个地方吗？我可以用那个。显然，即使在今天，也没有直接允许它的附加组件。

【解决方案2】：

下载众多 Firefox 屏幕捕获扩展程序之一，并查看其代码以了解其实现方式。例如Screengrab、Fireshot 或Page Saver

【讨论】：

谢谢，我看了几个，发现 Page Saver 是最容易理解和理解的。

【解决方案3】：

我猜应该是这样的：

将有问题的 DOM 元素复制到单独的 iframe 或浏览器（用户看不到）
使用 drawWindow() 将该 iframe 的窗口绘制到 html 画布上。查看 Tab Preview 插件的源代码，了解它是如何完成的。

【讨论】：

现在查看标签预览插件。谢谢