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

Question

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

理想情况下，我想能够采取一个DOM元素（不管它是在页面上可见或不可见）的截图，是这样的：

VAR截图截图=（的document.getElementById（”例如'）;

任何指针或建议将是很好，搜索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(...); 

Answer 2

和下载Firefox的许多屏幕捕获扩展之一，并期待在他们的代码来看看。他们是怎么做的，例如Screengrab，Fireshot或Page Saver

Answer 3

我想这将是这样的：

1. 复制的DOM元素中的问题，以一个单独的iframe或浏览器（这是不可见的用户）
2. 涂料的窗口使用drawWindow（）将该iframe放到HTML画布上。查看Tab Preview插件的来源，看看这是如何完成的。