使用JavaScript从Base64字符串创建的图像文件中添加元数据

Question

我有一个现成的代码，可以将base64字符串转化为相应的图像文件。现在，我想添加一些元数据，例如上次修改日期、摄影师、版权、积分等。 尝试了以下方法，但没有成功。是否有办法可以添加元数据？

这里的base64Source是我从中获取base64内容的dataUri。

function (base64Source, name) {
        var base64Content = base64Source.substr(base64Source.indexOf(',') + 1);

        var byteString = window.atob(base64Content);
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        var file = new Blob([ia], {type: 'image/jpeg'});
        return new File([the_file], name);
    };

我修改了这段代码，如下：

function (base64Source, name) {
        var base64Content = base64Source.substr(base64Source.indexOf(',') + 1);

        var byteString = window.atob(base64Content);
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        var file = new Blob([ia], {type: 'image/jpeg'});
        return new File([the_file], name,{
            lastModified: new Date().getTime(), 
            tooltip : 'test tooltip',
            caption : 'test caption',
            copyright : 'Test',
            credits : 'Test'
        });
    };

- user123475

---

类似 https://github.com/hMatoba/piexifjs 这样的东西会有帮助吗？ - Luke Bailey

谢谢Luke。但是，我需要创建带有更新元数据的文件并将其保存在某个S3中。 - user123475

这是一个关于 [tag:amazon-s3] 的问题。我不知道 s3 的具体细节，但元数据应该通过头部或 URL 参数进行 POST 提交。 - georgeawg

我希望更新文件的元数据，例如摄影师、版权等，而不是像 https://stackoverflow.com/questions/41292005/aws-s3-image-saving-loses-metadata 中提到的 s3 元数据。 - user123475

@user123475 - 你找到解决方案了吗？如果是，请分享一下。 - niltoid

Answer 1

这些元数据应该是文件数据本身的一部分。

javascript的File对象不会改变文件的数据（除了File从Blob构造函数继承的EOL endings选项）。

因此，您必须实际修改文件的数据（即ia的ArrayBuffer中包含的字节）。

您所做的方式取决于您正在处理的图像类型。不同的图像格式有不同的规则，可以接受哪些元数据以及它们应该如何存储在文件中。

例如，对于JPEG文件、TIFF和webp格式，通常将其存储在EXIF数据中，在应用段中存储，由JPEG的0xFFE1标记进行识别。webp使用chunkHeader('EXIF')进行标记。它们也都支持XMP。
PNG还允许一些text-info元数据。

其他文件格式可能支持其他元数据格式，编写一个通用编码器将是...非常困难的工作。

但是，对于大多数常见格式，一些库已经存在（可以使用您喜欢的网络搜索工具轻松找到JPEG的EXIF库）。

- Kaiido

---

感谢Kaiido的详细解释。由于我在裁剪原始图像后生成图像，因此需要更新图像元数据。我使用了<img-crop>指令来裁剪图像，但这会导致丢失原始图像的元数据。您有更好的方法吗？ - user123475