Agregar funcionalidad de captura de pantalla a una extensión de Firefox

Question

¿Existe un enfoque multiplataforma para tomar capturas de pantalla de una extensión de Firefox?

Idealmente me gustaría ser capaz de tomar una captura de pantalla de un elemento DOM (independientemente de si es visible en la página o no), algo así como:

var = captura de pantalla captura de pantalla (document.getElementById (' ejemplo ');

Cualquier indicador o sugerencia sería bueno, buscar https://developer.mozilla.org/ sólo se produce imágenes que han utilizado en varias guías

Answer 1

Después de examinar el código de varias extensiones. Tomé el siguiente enfoque (para tomar una instantánea de un elemento dom en particular). Esto puede ser usado en una extensión de Firefox para tomar capturas de pantalla de la página entera, para tomar capturas de pantalla de la ventana del navegador y para tomar capturas de pantalla de un elemento DOM en particular (y todos sus nodos secundarios):

1. Añadir lienzo para xul.
2. Encuentra las cotas y las coordenadas de la parte superior izquierda del elemento.
3. Copia la parte de la ventana en el lienzo.
4. Convertir lienzo en archivo 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()); 
} 

---

Para hallar la coordenada superior izquierda de 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; 
} 

---

Para conseguir el acceso a browser.xul de la barra lateral

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

Descargar una de las muchas extensiones de captura de pantalla de Firefox, y mirar a su código para ver. cómo lo hacen. Ej. Screengrab, Fireshot O Page Saver

Answer 3

supongo que sería algo como esto:

1. Copiar el elemento DOM en cuestión a un iframe o separada del navegador (que no es visible para el usuario)
2. pintar la ventana de ese iframe en un lienzo html usando drawWindow(). Consulte la fuente del complemento Vista previa de pestañas para ver cómo se hace esto.