如何从 JavaScript 读取 png 元数据？答案

【问题标题】：How to read png meta data from JavaScript?如何从 JavaScript 读取 png 元数据？
【发布时间】：2016-04-29 06:52:44
【问题描述】：

我的自定义服务器在 PNG 元数据字段中嵌入有关图像的元数据。图像通过常规 img 标签加载。我想从 JavaScript 访问元数据 - 有什么方法可以实现吗？

如果不是，为图像提供附加信息的替代方法是什么？图像是动态生成的，而且制作成本相对较高，所以我想在一次往返服务器的过程中提供元数据和图像数据。

【问题讨论】：

你有什么服务器设置？ apache/php???
一个自定义的 C++。这个问题重要吗？我知道如何在 png 中嵌入额外的信息，我只是不知道如何从 JS 中获取它。
我问是因为如果它是通常的 Apache 和 PHP 设置来运行大部分网络，你会发现你可以访问 php 中的一些内置函数来访问图像中的元数据（如果您认为 Exif 数据是这样的）Javascript 本身不提供（afaik）任何本机手段来做您想做的事。互联网上还有其他 C++ 库，您可以与它们交互 ~ www.exiv2.org ?
是的，但是 PHP 和 C++ 在 client 方面都没有帮助我，这就是这个问题的意义所在。服务端已经解决了，但是如何在浏览器中从png图片中提取嵌入的元信息呢？
这个github.com/exif-js/exif-js 是否有帮助我不知道，但可能值得调查

标签： javascript web browser png

【解决方案1】：

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

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

在浏览器中如何读取 PNG 元数据：

        function loadFileAsBlob(url){
            return new Promise((resolve, reject) => {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.responseType = 'blob';
                xhr.onload = function(e) {
                    if (this.status === 200) {
                        resolve(this.response);
                        // myBlob is now the blob that the object URL pointed to.
                    }else{
                        reject(this.response);
                    }
                };
                xhr.send();
            })
        };

        const blob = await loadFileAsBlob('1000ppcm.png');
        metadata = readMetadataB(blob);

【讨论】：

【解决方案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 的块是如何布局的，并弄清楚您将元数据存储在哪种类型的块中。不过，如果您只能使用标头，则不建议这样做...

【讨论】：