将截图功能添加到Firefox扩展 [英] Adding screenshot functionality to a firefox extension

问题描述

理想情况下，我希望能够截取一个dom元素的截图（不管它在页面上是否可见），如下所示：

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

任何指针或建议都不错，搜索 https://developer.mozilla.org/ 仅产生他们在各种指南中使用的截图。

解决方案

在考察了几个扩展的代码之后，下面的方法（拍摄一个特定的dom元素的快照），这可以在Firefox扩展中用来截取整个页面的截图，截取浏览器窗口的截图，并截取特定的dom元素（和所有）
$ b

1. 将画布添加到xul。


2. 将部分窗口复制到画布中。
   
3. 将画布转换为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）; 
 //获取整个窗口的快照
 // 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（））; 
 
 $ / code> 








---

 函数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; 
} 
返回curleft; 
 
 
函数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; 
 
 code 
 
 
 $ p $要访问浏览器.xul from sidebar  
 
 
  var mainWindow = window.QueryInterface（Components.interfaces.nsIInterfaceRequestor）
 .getInterface（Components。接口.nsIWebNavigation）
 .QueryInterface（Components.interfaces.nsIDocShellTreeItem）
 .rootTreeItem 
 .QueryInterface（Components.interfaces.nsIInterfaceRequestor）
 .getInterface（Components.interfaces.nsIDOMWindow）; 
 
 mainWindow.gBrowser.addTab（...）; 
  
 
Is there a cross-platform approach to taking screenshots from a firefox extension?

Ideally I'd like to be able to take a screenshot of a dom element (irrespective of whether it's visible on the page or not), something like:

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

Any pointers or suggestions would be nice, searching https://developer.mozilla.org/ only yields screenshots they've used in various guides.
解决方案
After examining the code of several extensions. I took the following approach (to take a snapshot of a particular dom element). This can be used in a Firefox extension to take screenshots of the whole page, to take screenshots of the browser window and to take screenshots of a particular dom element (and all of its child nodes):

Add canvas to xul.
Find dimensions and top-left co-ordinates of element.
Copy portion of window to canvas.
Convert canvas to base64 PNG file.



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





To find top left coordinate of an element
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;
}




To get access to browser.xul from sidebar
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(...);


                        
这篇关于将截图功能添加到Firefox扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！