无法将图像从函数加载到 HTML 画布答案

【问题标题】：Not being able to Load Image from a function To HTML Canvas无法将图像从函数加载到 HTML 画布
【发布时间】：2021-11-02 09:20:42
【问题描述】：

我正在尝试将屏幕截图图像放入 html 画布但无法。我使用以下 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);
});

【问题讨论】：

听起来像是跨浏览器违规...图片必须与网页位于同一域才能正常工作

标签： javascript canvas google-chrome-extension html5-canvas

【解决方案1】：

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

【讨论】：