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

Question

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

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

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

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

Answer 1

在检查了几个扩展的代码之后.我采用了以下方法(拍摄特定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(...);