Javascript Canvas 从图像中获取数据并显示

Question

我不知道为什么这不起作用。图像的 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">

编辑：它似乎从图像中获取的数据可能不正确，但我不知道为什么......我的意思是为什么它会获取数据但不完整或不正确？

Answer 1

请试试这个：（您不需要获取或放置图像数据）

你也这样做了：ctx.putImageData(imageData, canvas.width, canvas.height);。这意味着您正在完全在 canvas 之外绘制图像。改为这样做：ctx.putImageData(imageData, 0,0);

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;
        //draw the image onto the canvas
        ctx.drawImage(this, 0,0);
        //use the data uri 
        test.src = canvas.toDataURL("image/png");
    }

<img src="" id="test">

Javascript Canvas 从图像中获取数据并显示

Javascript Canvas get data from image and display it

javascript

canvas

imagedata