0

これが機能しない理由がわかりません。画像の src 属性は新しいデータで変更されますが、画像は実際には表示されません。私はいくつかの異なる画像で試しました。これはブラウザの単なる JavaScript であり、Jquery が必要です。

<body>
<img src="" id="test">
</body>
<script>
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    let img = new Image();
    img.onload = getIt
    img.src = 'download.png';

    function getIt() {      
        canvas.width = this.width;
        canvas.height = this.height;
        const imageData = ctx.getImageData(0, 0, this.width, this.height);
        ctx.drawImage(this, canvas.width , canvas.height);
        ctx.putImageData(imageData, canvas.width, canvas.height);

        $('#test').get(0).src = canvas.toDataURL("image/png");
    }

</script>

いくつかの異なる画像を試してみましたが、すべて png です。現時点では、これがプロジェクトのコード全体であるため、干渉する可能性のあるものは何もないと思います。

結果はこれですが、画像は見えません：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAeCAYAAAAhDE4sAAAAMklEQVRIS+3SsQ0A....etc" id="test">

編集:画像からデータを誤って取得しているようですが、理由はわかりません...なぜデータを取得するのに不完全または間違っているのでしょうか?

4

1 に答える 1