Добавление функциональности скриншотов в расширение Firefox - PullRequest
Новая
       37

Добавление функциональности скриншотов в расширение Firefox

7 голосов
/ 09 июля 2010

Существует ли кроссплатформенный подход к созданию снимков экрана с расширением Firefox?

В идеале я бы хотел иметь возможность сделать снимок экрана с элементом dom (независимо от того, виден ли он на странице или нет), что-то вроде:

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

Любые указатели или предложения были бы хороши, поиск https://developer.mozilla.org/ дает только скриншоты, которые они использовали в различных руководствах.

Ответы [ 3 ]

13 голосов
/ 15 июля 2010

После изучения кода нескольких расширений. Я выбрал следующий подход (чтобы сделать снимок определенного элемента DOM). Это можно использовать в расширении Firefox, чтобы делать снимки экрана всей страницы, снимки экрана окна браузера и снимки экрана конкретного элемента dom (и всех его дочерних узлов):

  1. Добавить холст к xul.
  2. Найти размеры и верхние левые координаты элемента.
  3. Копирование части окна на холст.
  4. Преобразование холста в 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());
}

Чтобы найти верхнюю левую координату элемента 

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

Чтобы получить доступ к 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(...);
2 голосов
/ 09 июля 2010

Я думаю, это будет примерно так:

  1. Скопируйте соответствующий элемент DOM в отдельный iframe или браузер (который не виден пользователю)
  2. Раскрасьтеокно этого iframe на холст HTML, используя drawWindow ().Проверьте источник дополнения Tab Preview, чтобы увидеть, как это делается.
2 голосов
/ 09 июля 2010

Загрузите одно из многих расширений для захвата экрана Firefox и посмотрите на их код, чтобы узнать, как они это делают. Например, Screengrab , Fireshot или Page Saver

...