向 Firefox 扩展添加屏幕截图功能

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

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

var 屏幕截图 = 屏幕截图(document.getElementById('example');

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

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

1. 将画布添加到xul。
2. 查找元素的尺寸和左上角坐标。
3. 将窗口的一部分复制到画布。
4. 将画布转换为 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(...);