Question

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

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

var screenshot = screenshot（document.getElementById（'example'）;

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

Answer 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;
}

要从侧边栏

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(...);

Answer 2

下载众多Firefox屏幕捕获扩展程序之一，查看他们的代码以了解他们是如何做到这一点的。例如Screengrab，Fireshot或Page Saver

Answer 3

我猜它会是这样的：

将相关DOM元素复制到单独的iframe或浏览器（用户不可见）
使用drawWindow（）将该iframe的窗口绘制到html画布上。查看Tab预览插件的来源，了解如何完成此操作。

将屏幕截图功能添加到firefox扩展

3 个答案: