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