獲取 png 的像素數據而不在 canvas 上繪制它

Question

我正在使用88222296504788來編程一個簡單的web游戲，它通過在888410641675788 88277868888888888888888888888880282672828.2818181818181818181818182818288.88188828888288828882888288.88288888828888888888882888288888288.88410675788在88247776321878上工作。

我想檢測播放器到達的像素的顏色，但問題是每台計算機根據其設置以略有不同的方式處理 png 圖像（至少我是這么理解的）。

我可以不檢查 canvas 上繪制的顏色，而是獲取實際 png 圖像像素的顏色（這樣在每台機器上都是一樣的）嗎？ 我必須使用原始像素數據嗎？ 如果是，那是如何工作的？

另外， 這對我有幫助嗎？ （我試圖理解，但我不能）

我不確定這可能與 javascript 相關，但可能與 php 或其他相關。

感謝您的時間

Answer 1

如果您正在制作游戲，我想知道您為什么要嘗試檢測顏色。 您打算將圖像用作 map 編輯器嗎？ 大多數圖像文件速度慢，重量大，必須通過解碼為 go。 我認為您將使用圖像文件作為 map，因為它創建起來很方便，但我認為在游戲中使用矢量 object 更有效。 比如SVG個文件，制作起來很簡單，大家可以按照自己的想法分別使用。 您可以單獨創建自己的 object 和 object 編輯器，而不是使用具有已知擴展名的文件。

不管怎樣，當我發表評論時，我找到了你需要的圖書館。 它是一個可以在瀏覽器上解碼PNG文件的庫，它讀取PNG文件的二進制文件並將字節分析結果返回給object。可以在數據字段中查看像素信息，解碼需要相當長的時間。

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);
};

例子

你可以找到這些庫，查看PNG 二進制結構並自己實現它們，但我不推薦它們，因為我認為這將是一項非常累人的工作。 反正在瀏覽器中通過Blob和Arraybuffer讀寫文件也是可以的。