Javascript 为什么我的chrome扩展返回空白画布？

内容脚本相当简单： 发送所有图像并从后台脚本更改源答案：

let imgs = document.getElementsByTagName('img');
for(let img of imgs){
  chrome.runtime.sendMessage({imgsrc:img.src,imgw:img.width,imgh:img.height}, function(response) {
    img.src = response.canvasurl;
  });
}

背景脚本也很简单：

chrome.runtime.onMessage.addListener(
        async function(request, sender, sendResponse) {
            let tmp_img = document.createElement("img");
            tmp_img.width = request.imgw;
            tmp_img.height = request.imgh;
            tmp_img.src = request.imgsrc;
            let canvas = document.createElement("CANVAS");
            let ctx = canvas.getContext("2d");
            canvas.width = request.imgw;
            canvas.height = request.imgh;
            ctx.drawImage(tmp_img, 0, 0);
            sendResponse({canvasurl: canvas.toDataURL()});
        });

但它只是清空了所有图像（返回的画布URL是空的画布）。

---

知道发生了什么吗？

正如迈克尔·雷迪诺夫指出的那样，我必须让图像先加载，但这还不够 我还必须将其更改为以下格式：

chrome.runtime.onMessage.addListener(
        function(request, sender, sendResponse) {
          all_of_the_async_logic(request,sendResponse);
          return true;
        });

---

这样，我可以告诉连接等待响应（使用return true并在侦听器中删除异步）

映像异步加载，您需要侦听Image

load

事件，然后调用

ctx.drawImage

您是对的（我还必须在这个函数true中删除异步返回并调用另一个函数）谢谢