如何通过chrome.experimental.offscreenTabs.toDataUrl正确生成图像？ [英] How to produce an image by chrome.experimental.offscreenTabs.toDataUrl correctly?

问题描述

我遇到了问题： chrome.experimental.offscreenTabs.create 效果很好，但 toDataUrl 方法产生高度为1像素的图像。我已经尽力了，但 toDataUrl 生成的图像没有显示我指定的大小。如何解决这个问题？

I've got a problem: the chrome.experimental.offscreenTabs.create worked well, but the toDataUrl method produced an image with a height of 1 pixel. I've tried my best, but the image produced by toDataUrl does not show the size as I specified. How can this problem be solved?

这是我的代码：

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 + "' />");
    });
});

推荐答案

offscreenTabs API是实验性的。下面的解决方案已经在Chromium 20.0.1132.57（Linux）中成功测试过，但这并不意味着代码仍然适用于更高版本。

这个答案是跟进如何使用实验性的offscreenTab API？

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.
This answer is a follow-up to How to use the experimental offscreenTab API?

chrome.experimental.offscreenTabs.create 在创建选项卡时被调用。使用 chrome.webRequest <进行测试/ a> API和UNIX netcat 命令显示可以触发回调之前服务器响应。因此，在呈现页面之后不可能触发回调。

The callback function of chrome.experimental.offscreenTabs.create is called when the tab is created. Tests using the chrome.webRequest API and the UNIX netcat command showed that the callback can be fired before the server responds. Hence, it's unlikely that a callback is triggered after the page is rendered.

我的演示扩展包含5个文件。他们的角色简要解释了：

My demo extension consists of 5 files. Their role is briefly explained:

• manifest.json - 扩展程序所需的粘合剂（请参阅文档）。


• sayhello.js - A 内容脚本，通知后台页面。这个助手是必要的，因为 chrome.tabs 和 chrome.webRequest 无效： chrome.tabs 的事件侦听器永远不会触发屏幕外标签，以及 chrome.webRequest 在呈现页面之前触发。


• background.js - 从内容脚本接收消息的背景页面。 chrome.extension.getViews（） 用于查找启动屏幕外标签的视图。


• options.html - 启动屏幕外标签的可见视图。 （后台页面无法启动屏幕外标签。）


• options.js - 当清单版本2时处于活动状态，不执行内联脚本。该脚本必须放在外部文件中，并使用< script src> 加载。

• 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 ^{相同的文件，crx扩展名： CRX} 。如果您想测试它，请不要忘记在 chrome：// flags 上启用实验性权限。

I've uploaded the extension to http://rob.lekensteyn.nl/offscreentabs.zip ^{same file, crx extension: CRX}. Don't forget to enable the experimental permission at chrome://flags, if you want to test it.

{
    "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

sayhello.js

chrome.extension.sendMessage("Hello"); // Yup, that's it

background.js

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

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

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

这篇关于如何通过chrome.experimental.offscreenTabs.toDataUrl正确生成图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！