Question

我的自定义服务器在PNG元数据字段中嵌入有关图像的元数据。图像通过常规img标记加载。我想从JavaScript访问元数据 - 以任何方式实现这一目标吗？

如果没有，为图像提供附加信息的替代方法是什么？图像是在运行中生成的，并且生成起来相对昂贵，因此我想在一次往返服务器的过程中提供元数据和图像数据。

Answer 1

我有类似的任务。我必须将物理尺寸和其他元数据写入PNG文件。我找到了一些解决方案，并将其组合到一个小库中。 png-metadata

它可以从NodeJS缓冲区读取PNG元数据，并使用新的元数据创建一个新的缓冲区。

以下是在浏览器中读取PNG元数据的方法：

java --module-path out --module ModTwo/p2.RunMe

Answer 2

我能想到的几个解决方案：

将元数据作为标头传递，使用XMLHttpRequest加载图像并通过将原始字节转换为数据uri来显示它，如所讨论的here。看起来大致如下：

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
    var metadata = xhr.getResponseHeader("my-custom-header");
    image.src = window.URL.createObjectURL(xhr.response);
}
xhr.open('GET', 'http://whatever.com/wherever');
xhr.send();

或者，在js中编写一个小的png解析器（或者使用类似emscripten之类的东西将libpng编译为javascript），并且基本上和上面做的一样。

实际写作可能不会太难;因为你不关心图像数据，所以你只需要编写块遍历代码。阅读如何布置块here，并找出存储元数据的块类型。但是，如果您只能使用标题，请不要推荐这个...

如何从JavaScript中读取png元数据？

2 个答案: