Вопрос по offscreentabs, google-chrome-extension, javascript, screenshot – Как правильно создать изображение с помощью chrome.experimental.offscreenTabs.toDataUrl?

1

У меня проблема:chrome.experimental.offscreenTabs.create работал хорошо, ноtoDataUrl Методом получается изображение с высотой 1 пиксель. Я старался изо всех сил, но изображение, созданноеtoDataUrl не показывает размер, как я указал. Как можно решить эту проблему?

Вот мой код:

chrome.experimental.offscreenTabs.create({ url: "http:/www.baidu.com" }, function(offscreenTab) {
    // console.log(offscreenTab);
    chrome.experimental.offscreenTabs.toDataUrl(offscreenTab.id, { format: "png" }, function(imgUrl) {
        $("#container").html("<img src='" + imgUrl + "' />");
    });
});
Да, я пытался определить ширину и высоту, но это не сработало. WuJun
Вы пытались определитьwidth а такжеheight свойства при использованииchrome.experimental.offscreenTabs.create? Rob W

Ваш Ответ

1   ответ
5

The offscreenTabs API is experimental. The solution below has successfully been tested in Chromium 20.0.1132.57 (Linux), but that doesn't mean that the code still works in later versions.
Как использовать экспериментальный API offscreenTab?

Функция обратного вызоваchrome.experimental.offscreenTabs.create вызывается при создании вкладки. Тесты с использованиемchrome.webRequest API и UNIXNetcat Команда показала, что обратный вызов может быть запущенbefore сервер отвечает. Следовательно, маловероятно, что обратный вызов вызванafter страница отображается.

Мое демо расширение состоит из 5 файлов. Их роль кратко объяснена:

manifest.json - The required glue for the extension (see documentation). sayhello.js - A content script which notifies the background page. This helper is necessary, because the chrome.tabs and chrome.webRequest are useless: The event listeners of chrome.tabs are never triggered for offscreen tabs, and the event listeners of chrome.webRequest are triggered before the page is rendered. background.js - A background page to receive the message from the content script. chrome.extension.getViews() is used to locate the view which launches the offscreen tab. options.html - The visible view which launches offscreen tabs. (The background page cannot launch an offscreen tab). options.js - When manifest version 2 is active, inline scripts are not executed. The script must be placed in an external file, and loaded using <script src>.

Я загрузил расширение вhttp://rob.lekensteyn.nl/offscreentabs.zip same file, crx extension: CRX, Не забудьте включитьexperimental разрешение наchrome://flags, если вы хотите проверить это.

manifest.json
{
    "name": "OffscreenTabs API test",
    "version": "1.0",
    "description": "offscreenTabs demo - See https://stackoverflow.com/q/11606135",
    "manifest_version": 2,
    "permissions": ["experimental", "<all_urls>"],
    "options_page": "options.html",
    "background": {"scripts": ["background.js"] },
    "content_scripts": [{
        "js": ["sayhello.js"],
        "matches": ["<all_urls>"]
    }]
}
sayhello.js
chrome.extension.sendMessage("Hello"); // Yup, that's it
background.js
chrome.extension.onMessage.addListener(function(message, sender) {
    if (message === "Hello" && sender && sender.tab) {
        // Message received from content script, pass information to a view
        //  within our extension, which processes offscreenTabs
        chrome.extension.getViews({type:"tab"}).forEach(function(_window) {
            if (_window.checkTab) _window.checkTab(sender.tab.id);
        });
    }
});
options.html
<!DOCTYPE html>
<head>
<meta charset="utf8">
<title>offscreenTabs test</title>
<script src="options.js"></script>
</head>
<body>
Enter an URL and press <kbd>Enter</kbd>.<br>
<input type="url" size="100" id="url" value="https://stackoverflow.com/users/938089/rob-w">
<img id="lastImg">
</body>
</html>
options.js
"use strict";

var collection = [];
// This function is called by the background (via the content script)
// If the tabId is recognised, take a screenshot
function checkTab(tabId) {
    var index = collection.indexOf(tabId);
    if (index !== -1) {
        collection.splice(index, 1); // Remove tabId
        toDataUrl(tabId);            // Take screenshot
    }
}

function create(url, width, height) {
    var createProperties = {url: url};
    if (width) createProperties.width = width;
    if (height) createProperties.height = height;

    // Create offscreen tab
    chrome.experimental.offscreenTabs.create(createProperties, function(offscreenTab) {
        console.log("Created " + offscreenTab.id, offscreenTab);
        collection.push(offscreenTab.id);
    });
}
function toDataUrl(offscreenTabId, options) {
    chrome.experimental.offscreenTabs.toDataUrl(offscreenTabId, options, function(dataUrl) {
        document.getElementById('lastImg').src = dataUrl;
    });
}

document.addEventListener('DOMContentLoaded', function() {
    // "Press Enter to load the offscreen tab and take a screenshot"
    document.getElementById('url').onkeyup = function(ev) {
        if (ev.keyCode == 13) 
            create(this.value);
    };
});
Большое спасибо . Ты такой милый . Ваш метод работает хорошо. Еще раз спасибо & # xFF01; WuJun
@Rob W: еще одна удивительная вещь ...

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