在网络上读取 PNG 元数据

Question

我最近编写了一个Python模块，它使用PIL将元标签和值写入PNG图像，目的是让网页读取标签并对图像进行相应的排序（我对相机类型等默认内容不感兴趣，我例如，如果我刚刚参加过集会，请附加“CarModel”之类的标签。

有没有人推荐一种读取我目前正在使用 PHP 的 PNG 元数据的方法？ （http://stackoverflow.com/questions/2190236/how-can-i-read-png-metadata-from-php在底部）这很棒，因为它只显示我添加的标签，但很烦人，因为我无法用许多图片的数据构建一个整齐数组，javascript可以做到这一点吗？

抱歉，如果我在解释时很垃圾，但我会重新解释。如果需要的话。

Answer 1

你应该看看下面的 php 函数 - exif_read_data

PS : 据我所知，javascript 无法做到这一点

Answer 2

以下是一个声称能够读取图像元数据的 Javascript 库的链接：

http://blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-with.html

Answer 3

nihilogic Javascript 库对于客户端 EXIF 读取和解析确实非常有用；但这仅适用于 JPEG 图像，因为元数据仅支持 JPEG 和 TIFF 格式（并且 TIFF 格式仅受 Safari 浏览器本机支持）。
PNG 可以包含元数据，但不能包含 JPEG 或 TIFF 格式允许的 IPTC 或 EXIF 字段形式。

Answer 4

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

它可以读取和写入 PNG 元数据。它可以在客户端和服务器端使用。
也许它会对某人有所帮助。

以下是如何在浏览器中读取 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);