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

Question

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

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

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

снимок экрана var = снимок экрана (document.getElementById ('пример');

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

7

firefox firefox-addon screenshot

задан Ivan 8 July 2010 в 20:40

3 ответа

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

2

ответ дан 6 December 2019 в 11:45

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

Скопируйте рассматриваемый элемент DOM в отдельный iframe или браузер (который не виден пользователю)
Нарисуйте окно этот iframe на холст HTML с помощью drawWindow (). Ознакомьтесь с исходным кодом надстройки Tab Preview, чтобы узнать, как это делается.

2

ответ дан 6 December 2019 в 11:45

Другие вопросы по тегам:

firefox firefox-addon screenshot

Похожие вопросы:

score 13 · Accepted Answer

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

Добавить холст в xul.
Найдите размеры и координаты элемента в левом верхнем углу.
Копировать часть окна на холст.
Преобразование холста в файл PNG base64.

 function getElementScreenshot (elm) {
var x = findPosX (вяз);
var y = findPosY (вяз);
var width = elm.clientWidth;
var height = elm.clientHeight;
var cnvs = document.getElementById ("aCanvas");
cnvs.width = ширина;
cnvs.height = высота;
var ctx = cnvs.getContext ("2d");
 // Сделать снимок всего окна
 // ctx.drawWindow (mainWindow.content, 0, 0, mainWindow.innerWidth, mainWindow.innerHeight, "rgb (255,255,255)");
ctx.drawWindow (mainWindow.content, x, y, ширина, высота, «rgb (255,255,255)»);
возврат (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(...);