无法从函数加载图像到 HTML Canvas

Question

我正在尝试将屏幕截图图像放入 html canvas 但无法做到。我使用以下 chrome API 截取了当前选项卡的屏幕截图。正在尝试 chrome 扩展。

/* background.js */
let id = 100;
//calling chrome api
chrome.browserAction.onClicked.addListener(() => {
    chrome.tabs.captureVisibleTab((screenshotUrl) => {
        const viewTabUrl = chrome.extension.getURL('screenshot.html?id=' + id++)
        let targetId = null;
        //checking if the opened tab id is the same as the target id
        chrome.tabs.onUpdated.addListener(function listener(tabId, changedProps) {
            if (tabId != targetId || changedProps.status != "complete")
                return;
            chrome.tabs.onUpdated.removeListener(listener);
            const views = chrome.extension.getViews();
            for (let i = 0; i < views.length; i++) {
                let view = views[i];
                if (view.location.href == viewTabUrl) {
                    view.setScreenshotUrl(screenshotUrl);
                    return;
                }
            }
        });

        //chrome tabs create method
        //no listener on create event because the tab’s URL may not be set at the time this event is fired
        chrome.tabs.create({ url: viewTabUrl }, (tab) => {
            targetId = tab.id;
        });
    });
});

但是无法从函数中调用图像

function setScreenshotUrl(url) {
    document.getElementById('target').src = url;
};


var cnv = document.getElementById("conv");

cnv.onclick = function() {
    var x = document.getElementById("target").src;
    document.getElementById("demo").innerHTML = x;
};


window.addEventListener('load', function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("target");

    ctx.drawImage(img, 10, 10, 300, 175, 0, 0, 100, 175);
});

Answer 1

问题是图像在 windows 加载事件时未准备好，通过检查图像的 innerHTML 进行验证，而如果我尝试在 onClick 事件中做同样的事情，图像会成功加载到canvas.

无法从函数加载图像到 HTML Canvas

Not being able to Load Image from a function To HTML Canvas

javascript

canvas

google-chrome-extension

html5-canvas