如何從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元數據？

回答

相關問題