Add metadata (Exif) to base64

Question

I'm trying to reduce images in client side before uploading them to preserve users' bandwidth and storage space in server side, while keeping informations about the original shot.

Current process flow : fileReader -> canvas (drawImage) -> base64 -> XMLHttpRequest (to get progress) -> php server

One drawback of this technique is loss of metadata (Exif), such as date and time, position, orientation...

Extracting exif datas can be done via Exif JS or other library. But I didn't find how to put these informations in the reduced file (in canvas object, base64 url or php side).

Any idea or path to follow ?

Answer 1

There is no easy way to do this. Canvas will only save out the JPEG file, then encode it as either a Data-URL or a Blob depending on the method you chose with the most basic chunks. There is no mechanism to insert custom or additional chunks into the file format from the browser-side of things.

To put back the EXIF information you would have to do:

• Decode the Data-URI or convert the blob, both to ArrayBuffer
• Parse the buffer manually to map the markers
• Create a new buffer large enough to hold the produced JPEG file plus the EXIF data
• Insert the EXIF data
• Append image data etc. according the file format

Now you can wrap it as a Blob object or convert it back to a Data-URL. It's possible to do but not just straight forward. The file format specification will be necessary.

An optional, and perhaps better approach in this case, would be to extract the EXIF chunk, format it as a JSON object and send that as meta-data to the server. You just need to make server side "aware" of that it need to consider the meta-data for the image received.