将元数据(Exif)添加到base64

时间:2015-06-09 08:54:22

标签: javascript canvas upload exif

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

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

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

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

任何想法或路径都要遵循?

1 个答案:

答案 0 :(得分:1)

没有简单的方法可以做到这一点。 Canvas只会保存JPEG文件,然后将其编码为Data-URL或Blob,具体取决于您使用最基本块选择的方法。没有机制可以从浏览器端向文件格式插入自定义或附加块。

要放回您必须执行的EXIF信息:

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

现在您可以将其包装为Blob对象或将其转换回数据URL。它可以做但不仅仅是直接前进。 file format specification是必要的。

在这种情况下,可选的,也许更好的方法是提取EXIF块,将其格式化为JSON对象,并将其作为元数据发送到服务器。你只需要让服务器端"意识到"其中需要考虑所收到图像的元数据。