Javascript 将PNG图像导入为像素矩阵_Javascript_Import_Html5 Canvas_Png

Javascript 将PNG图像导入为像素矩阵

javascript import html5-canvas

Javascript 将PNG图像导入为像素矩阵,javascript,import,html5-canvas,png,Javascript,Import,Html5 Canvas,Png,我可以使用XHR在同一台服务器上获取PNG文件的内容。然而，我不知道如何将这个“文本”转换成像素数组。有没有一种简单的JavaScript实现方法？我已经看到哪个使用了canvas元素，但我不想绘制图像。如果我可以在不向用户实际显示图像的情况下实现同样的效果（就像在画布上绘制图像一样），那就太好了。如果您不介意使用库，p5js库可以使用get（）方法轻松获取任何图像的RGBA值，而无需显示图像： <html> <head> <script src="ht

我可以使用XHR在同一台服务器上获取PNG文件的内容。然而，我不知道如何将这个“文本”转换成像素数组。有没有一种简单的JavaScript实现方法？我已经看到哪个使用了canvas元素，但我不想绘制图像。如果我可以在不向用户实际显示图像的情况下实现同样的效果（就像在画布上绘制图像一样），那就太好了。

如果您不介意使用库，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>


函数预加载（）{
image=loadImage（“./myImage.png”）；
}
函数设置（）{
设arr=[]；
for（设i=0；i


这是否适用于您？（关闭自动磨合设置）。我认为您可以使用自己的函数，但在尝试构建包含像素值的数组之前，必须小心地等待图像完全加载。
为此目的，似乎有一个很大的库，一些更简单的可能会更好。但是，loadImage
函数是什么？另一种方法可能是使用hidden=true
属性设置画布，使画布在页面上不直接可见。（
）也是来自p5.js的loadImage
？是的。另外，p5会自动启动函数预加载（）
然后启动函数设置（）
。我不能只使用函数而忽略自动启动的函数吗？