Dodawanie funkcjonalności zrzutów ekranu do rozszerzenia firefox

Question

Czy istnieje podejście wieloplatformowe do robienia zrzutów ekranu z rozszerzenia firefox?

Idealnie chciałabym móc zrobić zrzut ekranu z elementu DOM (niezależnie od tego, czy jest to widoczne na stronie lub nie), coś jak:

var = screenshot screenshot (document.getElementById (” przykładem ');

Wszelkie wskazówki i sugestie byłoby miło, szukając https://developer.mozilla.org/ daje tylko screeny oni używane w różnych przewodnikach

Answer 1

Po przejrzeniu kodu kilku rozszerzeń. Przyjąłem następujące podejście (aby zrobić migawkę konkretnego elementu dom). Może to zostać wykorzystane w rozszerzenie Firefoksa do podjęcia zrzuty ekranu całej strony, do robienia zrzutów ekranu okna przeglądarki oraz do podjęcia zrzuty ekranu z danego elementu DOM (i wszystkich jego węzłów potomnych):

1. Dodaj płótno xul.
2. Znajdź wymiary i lewy górny współrzędne elementu.
3. Skopiuj fragment okna na płótno.
4. Konwersja kanwy do pliku PNG na poziomie 64.

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

---

Aby znaleźć górny lewy współrzędnych elementu

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

---

aby uzyskać dostęp do browser.xul z bocznym

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

pobrać jeden z wielu rozszerzeń Firefoksa do przechwytywania ekranu, i patrzeć na ich kodu, aby zobaczyć. jak to robią, np. Screengrab, Fireshot Lub Page Saver

Answer 3

Chyba byłoby coś takiego:

1. Kopiuj element DOM w pytaniu do oddzielnego iframe lub przeglądarki (która nie jest widoczna dla użytkownika)
2. farbą okno że iframe na płótnie html za pomocą drawWindow(). Sprawdź źródło dodatku do zakładki Podgląd, aby zobaczyć, jak to się robi.