如何从JavaScript读取png元数据？

我的自定义服务器在PNG元数据字段中嵌入了关于图像的元数据。图像通过常规的img标签加载。我想从JavaScript访问元数据 - 以任何方式实现此目的？如何从JavaScript读取png元数据？

如果不是，为图像提供其他信息的替代方法是什么？这些图像是即时生成的，制作起来相对昂贵，所以我想在服务器的单次往返中提供元数据和图像数据。

2016-01-22 BuschnicK

你有什么服务器设置？阿帕奇/ PHP的??? – RamRaider

自定义的C++之一。这个问题是否重要？我知道如何在png中嵌入额外的信息，我只是不知道如何从JS获得它。 – BuschnicK

我问，因为它是通常的Apache运行PHP的设置，运行大部分的网络，你会发现你可以访问一些内置的函数在PHP中用于访问图像中的元数据（如果你认为Exif数据是这样的）Javascript本身不提供（afaik）任何本地手段来做你想做的。在互联网中还有其他C++库，您可能可以与〜www.exiv2.org进行交互？ – RamRaider

我能想到的一对夫妇的解决方案：

传递元数据作为报头，使用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的规划，并找出你正在存储元数据的块类型。但是，如果你只是使用头文件，不要真的推荐这个...

来源

2016-01-26 00:41:15

如何从JavaScript读取png元数据？

回答

相关问题