用于读取索引 PNG 数据的 JavaScript

标签 javascript image

我喜欢索引 PNG。使用它,我能够在单个 571 字节图像中定义 72x67 瓦片世界(总共 4,824 个瓦片)的“世界地图”。

现在我想使用 JavaScript 来读取该图像的数据。

我可以非常轻松地创建 Canvas ,在其中绘制图像,然后从其数据中提取数据。但是,这将为我提供完整的 RGB 颜色值。

现在的图像使用索引调色板,0 是墙,1 是路径,2 是商人,等等。虽然使用不同的颜色使图像在视觉上可用,但 JavaScript 有没有办法读取特定像素处颜色的索引,类似于 PHP 中的 imagecolorat 函数?

示例图片

image
(来源:adamhaskell.net)

最佳答案

如果不先通过 HTML5 Canvas 传递图像数据,您可能找不到更方便的读取图像数据的方法。

并不是说没有其他选择!

附件 A:pnglib.js (作者:Robert Eisele)

附件 B png.js (由 Devon Govett ),尽管这是假设您使用的是 Node.js。他的示例仍然在客户端使用 Canvas 。

关于用于读取索引 PNG 数据的 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22275031/

相关文章:

javascript - body 没有 getElementById 吗?

javascript - 在 componentDidMount 上 react native setState 不起作用

javascript - 铁路由器 waitOn Meteor.user()

css - 我应该使用 JPG 还是 PNG 作为平铺背景(背景重复)?

CSS 背景图片未出现在 Safari 中

java - 发送图像ObjectOutputStream

javascript - EntityMetadataNotFound : No metadata for "Task" was found - NestJS

javascript - 如何使用 "jQuery Popup Overlay"插件添加两个不同的弹出窗口?

php - 上传.mp3和图片文件;两者的区别

java - Android:GridView倾斜显示图像