将 PNG 图像导入为像素矩阵答案

【问题标题】：Importing a PNG image as a matrix of pixels将 PNG 图像导入为像素矩阵
【发布时间】：2020-01-05 02:25:57
【问题描述】：

我可以使用 XHR 在我的同一台服务器上获取 PNG 文件的内容。但是，我不知道应该如何将这个“文本”转换为像素数组。在 JavaScript 中有一种简单的方法吗？我见过this technique 使用canvas 元素，但我不想绘制图像。如果我可以在不向用户实际显示图像的情况下实现相同的效果（就像在画布上绘制它一样），那就太好了。

【问题讨论】：

标签： javascript import html5-canvas png

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

【讨论】：

这似乎是一个巨大的图书馆，更小的东西可能会更好。但是，loadImage 函数是什么？
可能是另一种方式，只是将您的画布设置为具有hidden=true 属性，以便画布在页面上不直接可见。 (<canvas id="myCanvas" width="220" height="277" hidden="true">)
loadImage 也是来自 p5.js 吗？
是的。 p5 也会自动启动 function preload() 然后 function setup()。
我不能只使用该功能而忽略自动启动的功能吗？