获取 png 的像素数据而不在 canvas 上绘制它

Question

我正在使用 javascript 编写一个简单的网络游戏，它通过在 html canvas 上绘制 png 地图来工作，其中地图上的颜色被编码为游戏对象（黑色是墙，红色是尖刺）。

我想检测玩家到达的像素的颜色，但问题是每台计算机根据其设置以略微不同的方式处理 png 图像（至少我是这么理解的）。

我可以不检查 canvas 上绘制的颜色，而是获取实际 png 图像的像素颜色吗（这样在每台机器上都是一样的）？我必须使用原始像素数据吗？如果是，它是如何工作的？

另外，this要不要帮帮我？（我试图理解，但我不能）

我不确定 javascript 是否可行，但可能与 php 或其他东西有关。

感谢您的宝贵时间

Answer 1

如果您正在制作游戏，我想知道您为什么要尝试检测颜色。您打算将您的图像用作地图编辑器吗？大多数图像文件速度慢、重量大，并且必须经过解码。我认为您将使用图像文件作为地图，因为它创建起来很方便，但我认为在游戏中使用矢量对象更有效。比如SVG文件制作简单，可以按照自己的想法单独使用。您可以单独创建自己的对象和对象编辑器，而不是使用具有已知扩展名的文件。

无论如何，在我发表评论时，我找到了您需要的库。它是一个可以在浏览器上解码PNG文件的库，它将PNG文件的二进制文件和returns字节分析结果读取到对象中。您可以查看数据字段中的像素信息，解码需要相当长的时间。

import UPNG from "upng-js";

const input = document.getElementById("upload") as HTMLInputElement;

input.onchange = async (ev) => {
  const file = input.files?.[0];
  if (!file) return;
  if (file.type !== "image/png") return;
  const result = UPNG.decode(await file.arrayBuffer());
  console.log(result);
};

Example

你可以找到这些库，查看 PNG binary structure 并自己实现它们，但我不推荐它们，因为我认为这将是一项非常累人的工作。反正在浏览器中通过Blob和Arraybuffer读写文件也是可以的

获取 png 的像素数据而不在 canvas 上绘制它

Get pixel data of a png without drawing it on a canvas

javascript

png