openbenches.org
openbenches.org copied to clipboard
Support HEIC files
As an Apple user, I want to be able to upload in this new format.
https://twitter.com/rafal_design/status/1105171620568723457?s=20
From the ImageMagick changelogs, you need 7.0.8-25 for ImageMagick 7 or 6.9.10-25 for Imagemagick 6.
https://stackoverflow.com/questions/55131609/read-exif-data-from-heic-photo-using-php?noredirect=1#comment97005467_55131609
When uploading a HEIC photo from an iPhone, it’s automatically converted to JPEG—but the GPS data is stripped, so it won’t work with OpenBenches.
To support HEIC we’ll need to know how to prevent Safari from converting the file to JPEG.
And for any other iPhone users wondering how to upload such a thing:
- On a Mac:
- Select the photos in the Photos app.
- Choose File > Export > Export Unmodified Original.
- This saved a .HEIC file with an .XMP sidecar file.
- I used a free app from the Mac App Store—HEIC Converter by @sindresorhus—to convert the file to a .jpg.
By doing this, it converted the photo to JPEG while preserving its GPS data.
Getting back to this.
- [x] cloudimg.io supports converting from HEIC to JPG/WebP. So we can serve up the images once they're uploaded. Some of the images display upside down though. I've raised a support ticket with them.
- [x] Next is reading the EXIF server side.
- [x] Display the HEIC in the browser (https://caniuse.com/?search=heic)
- [x] Then detecting the geolocation of the file in the browser.
- [ ] Finally, better instructions for iOS users!
Reading EXIF server side
$imagick = new Imagick();
$imagick->readImage('test1.heic');
$exifArray = $imagick->getImageProperties("exif:*");
var_dump($exifArray);
There are libraries for rendering HEIC in the canvas
- https://github.com/strukturag/libheif
- https://strukturag.github.io/libheif/libheif.js
1.3MB though!
Demo at https://strukturag.github.io/libheif/
Reading Geolocation EXIF from HEIC
https://github.com/exif-heic-js/exif-heic-js