Снимок экрана с использованием javascript для chrome extensions

Ответ 1

Поскольку вы используете это в расширениях Chrome, API вкладок имеет метод captureVisibleTab, который позволяет захватывать видимую область текущей выбранной вкладки в указанном окне.

Чтобы использовать это, вы просто добавляете "вкладки" в манифест permissions. А с вашей фоновой страницы или всплывающего окна (или любой другой страницы расширения) вы просто вызываете этот метод следующим образом:

chrome.tabs.captureVisibleTab(null, {}, function (image) {
   // You can add that image HTML5 canvas, or Element.
});

Вы можете управлять свойством, добавив {quality: 50} и изменить формат тоже, все описано в документах, упомянутых выше.

Красота HTML5, вы можете изменить это изображение с помощью HTML5 Canvas, вы можете очень легко манипулировать, преобразовывать, изменять, клип, все, что хотите!

Надеюсь, это то, что вы ищете! С Новым Годом!

Ответ 2

Я не уверен, что это было доступно, когда был дан оригинальный ответ, но теперь у Google есть пример, который показывает, как делать скриншоты:

http://developer.chrome.com/extensions/samples.html

Найдите "Test Screenshot Extension" на этой странице.

Ответ 3

Если вы ищете рабочий пример, я создал репо с расширением, которое снимает скриншот всей веб-страницы. Посмотрите здесь: https://github.com/marcinwieprzkowicz/take-screenshot

Ответ 4

Если вы находитесь внутри предприятия, ваш ИТ-специалист может установить для политики DisableScreenshots значение true. Вы можете проверить это, зайдя в chrome://policy и выполнив поиск этого ключа.

Ответ 5

Вот еще один подход, который работал для меня.
Требования были следующие:
(а) сделать снимок экрана в расширении Chrome
(б) скриншот должен иметь прозрачный фон
(c) снимок экрана должен быть передан другому процессу (через HTTP)

В этом разделе я представлю требование адресации фрагмента кода (b)
Полезные ссылки:
API отладчика расширений Chrome
домен отладчика протокола Chrome Devtools
Вы можете начать читать код из последней функции attachToDebugger

function captureScreenshot(tabId) {

    logMsg('{page}: captureScreenshot: status=aboutTo, tabId=${tabId}');

    chrome.debugger.sendCommand(
        {tabId:tabId},
        "Page.captureScreenshot", 
        {format: "png", fromSurface: true},
        response => {
            if(chrome.runtime.lastError) {
                logMsg('{back}: captureScreenshot: status=failed, tabId=${tabId}');
            }
            else {
                var dataType = typeof(response.data);
                logMsg('{back}: captureScreenshot: status=success, tabId=${tabId}, dataType=${dataType}');
                saveScreenshotRemotely(response.data);
            }
        });

    logMsg('{page}: captureScreenshot: status=commandSent, tabId=${tabId}');
}

//---------------------------------------------------------------------------

function setColorlessBackground(tabId) {

    logMsg('{back}: setColorlessBackground: status=aboutTo, tabId=${tabId}');

    chrome.debugger.sendCommand(
        {tabId:tabId}, 
        "Emulation.setDefaultBackgroundColorOverride",
        {'color': {'r': 0, 'g': 0, 'b': 0, 'a': 0}},
        function () {
            logMsg('{back}: setColorlessBackground: status=enabled, tabId=${tabId}');
            captureScreenshot(tabId);
        });

    logMsg('{back}: setColorlessBackground: status=commandSent, tabId=${tabId}');
}

//---------------------------------------------------------------------------

function enableDTPage(tabId) {

    logMsg('{back}: enableDTPage: status=aboutTo, tabId=${tabId}');

    chrome.debugger.sendCommand(
        {tabId:tabId}, 
        "Page.enable", 
        {}, 
        function () {
            logMsg('{back}: enableDTPage: status=enabled, tabId=${tabId}');
            setColorlessBackground(tabId);
            /*
             * you can comment 
             * setColorlessBackground(tabId);
             * and invoke 
             * captureScreenshot(tabId);
             * directly if you are not interested in having a 
             * transparent background
             */
        });

    logMsg('{back}: enableDTPage: status=commandSent, tabId=${tabId}');
}

//---------------------------------------------------------------------------

function attachToDebugger(tabId) {
    chrome.debugger.attach(
        {tabId:tabId}, 
        g_devtools_protocol_version,
        () => {
            if (chrome.runtime.lastError) {
                alert(chrome.runtime.lastError.message);
                logMsg('{back}: debugger attach failed: error=${chrome.runtime.lastError.message}');
            }
            else {
                logMsg('{back}: debugger attach success: tabId=${tabId}');
                enableDTPage(tabId);
            }
        });
}