CODEWITHSUNDEEP
javascriptnode.jsreactjsimageexif
Alexmatthew Candelario
Alexmatthew Candelario

Reputation: 55

Read Exif Data in React

I am trying to build this tool where a user can geotag their photos for SEO purposes. I have a react app with a map that will return the desired coordinates and it has 2 forms components. 1 that will change the EXIF GPS data for the image and a browser and upload images. I have most of it working the problem I am running into is I need to find a way to return the GPS data of an image I have found plenty of js libraries that will work but I can't seem to get it to work in my React components.

Something to now I have access to the file path and the image. I can return an image object as well I just need a tool or away to return or display the Exif data and be able to overwrite it. There may not be a tool yet if not guide in the direction to maybe build that tool.

Upvotes: 0

Views: 3733

Answers (1)

Mike Kovařík
Mike Kovařík

Reputation: 312

there's a simple library for that called exifr.

let {latitude, longitude} = await exifr.gps('./myimage.jpg')

or another ways to write this:

exifr.gps(buffer, gps => console.log(gps.latitude, gps.longitude))

and the get the whole EXIF and not just GPS, there's exifr.parse()

exifr.parse(uin8array).then(...)

You can use pretty much anything as input (file path, Buffer, ArrayBuffer, Uint8Array, Blob, URL, and more). Unfortunately it doesn't yet support writing exif back to the file.

Upvotes: 3

Related Questions