javascript - Chrome拡張機能を使用してキャンバスにbase64画像を表示する

Question

そのため、現在のタブのスクリーンショットを取得し、スクリーンショットの base64 文字列をコンテンツ スクリプトに送信する Google Chrome 拡張機能に取り組んでいます。以下のコードは、コンテンツ スクリプトのソースです。私の問題は、スクリーンショットをキャンバスに表示しようとすると何も表示されないことです。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;
    });