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

【问题标题】：Why does my chrome extension returns blank canvas?为什么我的 chrome 扩展返回空白画布？
【发布时间】：2020-11-23 10:31:44
【问题描述】：

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

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 是空画布）。知道发生了什么吗？

【问题讨论】：

图片异步加载，需要监听图片load事件然后调用ctx.drawImage
你是对的（我还必须删除此函数中的异步返回 true 并调用另一个函数）谢谢

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

【解决方案1】：

正如 Michael Radionov 指出的那样，我必须先加载图像，但这还不够我还必须将其更改为这种格式：

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

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

【讨论】：