时间戳

首页 > 解决方案 > Javascript Canvas 从图像中获取数据并显示它

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

问题描述

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

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

标签： javascriptcanvasimagedata

解决方案

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

你也在这样做：ctx.putImageData(imageData, canvas.width, canvas.height);. 这意味着您正在完全在画布之外绘制图像。改为这样做：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">

推荐阅读