Screenshot-Funktionalität zu einer Firefox-Erweiterung hinzufügen

Question

Gibt es einen plattformübergreifenden Ansatz, um Screenshots von einer Firefox-Erweiterung zu erstellen?

Im Idealfall würde Ich mag Lage sein, einen Screenshot von einem DOM-Elemente zu nehmen (unabhängig davon, ob es auf der Seite sichtbar oder nicht), so etwas wie:

var Screenshot = Screenshot (document.getElementById (‘ Beispiel ');

Alle Hinweise oder Anregungen wäre schön, auf der Suche https://developer.mozilla.org/ liefert nur Screenshots sie in verschiedenen Führungen verwendet haben

Answer 1

Nach Prüfung des Codes mehrerer Erweiterungen. Ich habe den folgenden Ansatz gewählt (um einen Schnappschuss eines bestimmten dom-Elements zu erstellen). Dies kann in einer Firefox-Erweiterung verwendet werden Screenshots der gesamten Seite zu nehmen, Screenshots des Browserfensters zu nehmen und Screenshots eines bestimmten DOM-Element zu nehmen (und alle untergeordneten Knoten):

1. hinzufügen Leinwand Xul.
2. Hier finden Sie die Bemaßungen und die oberen linken Koordinaten des Elements.
3. Kopiere einen Teil des Fensters auf die Leinwand.
4. Convert Leinwand in Base64 PNG-Datei.

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

---

Nach oben links Koordinate eines Elements

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

---

finden Zugang Um vom Sidebar 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

Herunterladen eines der vielen Capture-Erweiterungen Firefox-Bildschirm, und sehen sie ihren Code zu sehen. wie sie es tun, zB Screengrab, Fireshot Oder Page Saver

Answer 3

Ich denke, es ist etwas so sein würde:

1. Kopieren Sie die DOM-Element in Frage zu einem separaten iframe oder Browser (die nicht für den Benutzer sichtbar ist)
2. Malen Sie das Fenster dass Iframe auf einem HTML-Canvas mit DrawWindow(). Sehen Sie sich die Quelle des Tab-Vorschau-Addons an, um zu sehen, wie dies gemacht wird.