How to get GPS coordinates of HEIC images with JS

395 Views Asked by At

in order to place an uploaded image on a Leaflet Map I would like to get the GPS coordinates of HEIC/HEIF images (images taken from iPhone). Actually I use this JavaScript script :

const imageInput = document.getElementById('imageInput');
imageInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        let fileExtension = file.name.toLowerCase().split('.').pop();
        let reader = new FileReader();
        reader.onload = function ()
        {
            let tags = fileExtension === "heic" || fileExtension === "heif" ? findEXIFinHEIC(reader.result) : findEXIFinJPEG(reader.result);
            let latitudeComponents = tags["GPSLatitude"];
            let latitudeRef = tags["GPSLatitudeRef"];
            let longitudeComponents = tags["GPSLongitude"];
            let longitudeRef = tags["GPSLongitudeRef"];
            console.log(`The picture was taken at ${latitudeComponents} ${latitudeRef}, ${longitudeComponents} ${longitudeRef}.`)
        };
            reader.readAsArrayBuffer(file);
});

Knowing that findEXIFinHEIC() and findEXIFinJPEG() functions come from this lib. Furthermore, what is strange it's that on Desktop there is no problem : GPS coordinates are correctly retrieved from HEIC/HEIF and JPEG images. But on mobile, and on every browsers, these GPS coordinates are not retrieved (on same images that works on Desktop). Plus, HEIC/HEIC image are automatically converted to JPEG (I watched the value of "fileExtension" variable, from my code) without code customing from me. Also, I watched the $_FILES variable (I work on a WordPress website) with an Ajax call, and it's the same conclusion, HEIC/HEIF images are directly converted to JPEG on upload and EXIF metadata are not retrieved. So I'm a little bit lost and I don't know what to try now. Any help can be cool Thanks in advance Best regards

0

There are 0 best solutions below