javascript - 使用 chrome 扩展在画布上显示 base64 图像

Question

因此，我正在开发一个 Google Chrome 扩展程序，它会截取当前选项卡的屏幕截图并将屏幕截图的 base64 字符串发送到内容脚本。下面的代码是内容脚本的来源。我的问题是，当我尝试在画布上显示屏幕截图时，什么也没有出现。该response变量是base64字符串所在的位置。出于调试目的，我将字符串记录到控制台以确保它正常工作并且它确实返回了一个字符串。

安慰

内容脚本

    $("body").append('<canvas id="myCanvas" width="315" height="205" style="border:1px solid #d3d3d3;">');
    chrome.runtime.sendMessage({actions: "screenshot"}, function(response) {
        console.log(response);

        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        var img = new Image();
        img.onload = function () {
            context.drawImage(img, 0, 0, canvas.width, canvas.height);
        }
        img.src = response;
    });