I'm trying to implement storing of the focal point of a jpeg photo using JavaScript. I'm basing my work on a neat css trick I recently talked about here.
My plan is to pair this technique up with a separate JavaScript upload and cropping tool (like Croppie) and save the jpeg data to Amazon S3.
What I'm hoping to achieve is to store the x & y focal point values within the jpeg metadata to save having to do a database lookup.
I'll then read these values back out when displaying the image and inline the css background position styles to ensure that the image scales appropriately across different devices.
I've had a look around online and I can't find any easy way to encode this using JavaScript. Does anyone have any suggestions as to how I should approach this?
Assuming you're using browser to run javascript. Use readAsArrayBuffer to read the buffer. Look for the APP1 section and modify it to add your custom metadata, and then save the image. How to access JPEG EXIF in browser?
ExifTool can write the metadata. Use Node.js child process to call the program.
If possible, using a database system or an index to store the corresponding information is a quick and easy solution.