导入PNG图像作为像素矩阵

时间:2019-09-02 00:21:14

标签: javascript import html5-canvas png

我可以使用XHR在同一台服务器上获取PNG文件的内容。但是,我不知道如何继续将“文本”转换为像素数组。有没有一种简便的方法可以在JavaScript中做到这一点?我已经看到this technique使用canvas元素,但是我不想绘制图像。如果我能在不向用户实际显示图像的情况下实现相同的效果(就像在画布上绘制图像一样),那将是很棒的。

1 个答案:

答案 0 :(得分:0)

如果您不介意使用库,则p5js库可以使用get()方法轻松获得任何图像的RGBA值,而无需显示图像:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
      <script>
        function preload(){
            image = loadImage("./myImage.png");
        }

        function setup(){
            let arr=[];
            for(let i = 0 ; i < image.width; i++){
                for(let j = 0 ; j < image.height; j++){
                    let myPixel = image.get(i,j);
                    arr.push(myPixel)
                }
            }
            console.log(arr)
        }

        </script>
  </head>
  <body>
  </body>
</html>

codepen是否对您有用?(在设置中关闭自动运行)。我认为您可以使用自己的函数,但是在尝试构建包含像素值的数组之前,必须小心等待图像完全加载。

相关问题