javascript - 将元数据 (Exif) 添加到 base64

Question

我试图在上传之前在客户端减少图像以保留用户在服务器端的带宽和存储空间，同时保留有关原始镜头的信息。

当前流程:fileReader -> canvas (drawImage) -> base64 -> XMLHttpRequest(获取进度) -> php 服务器

此技术的一个缺点是元数据 (Exif) 丢失，例如日期和时间、位置、方向...

提取 exif 数据可以通过 Exif JS 完成或其他图书馆。但是我没有找到如何将这些信息放入简化文件中(在 canvas 对象、base64 url​​ 或 php 端)。

有什么想法或路径可以遵循吗？

Answer 1

没有简单的方法可以做到这一点。 Canvas 只会保存 JPEG 文件，然后根据您选择的最基本 block 的方法将其编码为数据 URL 或 Blob。没有从浏览器端将自定义或附加 block 插入文件格式的机制。

要放回 EXIF 信息，您必须执行以下操作:

• 解码 Data-URI 或将 blob 转换为 ArrayBuffer
• 手动解析缓冲区以映射标记
• 创建一个足够大的新缓冲区来容纳生成的 JPEG 文件和 EXIF 数据
• 插入 EXIF 数据
• 根据文件格式附加图片数据等

现在您可以将其包装为 Blob 对象或将其转换回 Data-URL。这是可能的，但不仅仅是直截了当的。 file format specification将是必要的。

在这种情况下，一种可选且可能更好的方法是提取 EXIF block ，将其格式化为 JSON 对象并将其作为元数据发送到服务器。您只需要让服务器端“意识到”它需要考虑接收到的图像的元数据。