Question

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

Answer 1

如果您不介意使用库，则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是否对您有用？（在设置中关闭自动运行）。我认为您可以使用自己的函数，但是在尝试构建包含像素值的数组之前，必须小心等待图像完全加载。

导入PNG图像作为像素矩阵

1 个答案: