Aggiunta della funzionalità screenshot a un'estensione firefox

Question

Esiste un approccio multipiattaforma per l'acquisizione di schermate da un'estensione di Firefox?

Idealmente mi piacerebbe essere in grado di prendere uno screenshot di un elemento DOM (a prescindere dal fatto che sia visibile sulla pagina o no), qualcosa di simile:

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

Qualsiasi puntatori o suggerimenti sarebbe bello, alla ricerca https://developer.mozilla.org/ produce solo le immagini che hanno utilizzati in varie guide

Answer 1

Dopo aver esaminato il codice di diverse estensioni. Ho adottato il seguente approccio (per scattare un'istantanea di un particolare elemento dom). Questo può essere usato in un'estensione per Firefox per prendere screenshot del l'intera pagina, di prendere screenshot della finestra del browser e di prendere screenshot di un particolare elemento DOM (e tutti i suoi nodi secondari):

1. Aggiungi tela xul.
2. Trova le dimensioni e le coordinate in alto a sinistra dell'elemento.
3. Copia parte della finestra su tela.
4. Converti canvas in file PNG base64.

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

---

Per trovare coordinare in alto a sinistra di un elemento

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

---

Per ottenere l'accesso a browser.xul dalla barra laterale

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

Scarica una delle tante estensioni di Firefox cattura dello schermo e osservare il loro codice per vedere. come lo fanno, ad esempio Screengrab, Fireshot O Page Saver

Answer 3

Credo che sarebbe stato qualcosa di simile:

1. Copia l'elemento DOM in questione a un iframe o del browser separata (che non è visibile all'utente)
2. dipingere la finestra che iframe su una tela html utilizzando drawWindow(). Controlla la fonte del componente aggiuntivo Anteprima scheda per vedere come è fatto.