在从 base64 字符串 javascript 创建的图像文件中添加元数据

Question

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

这里的 base64Source 是我从中获取 base 64 内容的 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'
        });
    };

Answer 1

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

javascript File 对象不会改变文件的数据_{（除了 File 继承自 Blob constructor 的 EOL endings 选项）}。

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

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

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

其他文件格式可能支持其他元数据格式，而为您编写一个通用编码器将是一项非常艰巨的工作。

但确实存在一些用于最常见格式的库（使用您最喜欢的网络搜索工具很容易找到 JPEG 的 EXIF 格式）。