openbenches.org icon indicating copy to clipboard operation
openbenches.org copied to clipboard

Support HEIC files

Open edent opened this issue 6 years ago • 6 comments
trafficstars

As an Apple user, I want to be able to upload in this new format.

https://twitter.com/rafal_design/status/1105171620568723457?s=20

edent avatar Mar 11 '19 20:03 edent

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

edent avatar Mar 13 '19 10:03 edent

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.

natesilva avatar May 13 '19 02:05 natesilva

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!

edent avatar Nov 20 '20 16:11 edent

Reading EXIF server side

$imagick = new Imagick();
$imagick->readImage('test1.heic');
$exifArray = $imagick->getImageProperties("exif:*");
var_dump($exifArray);

edent avatar Nov 20 '20 18:11 edent

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/

edent avatar Nov 20 '20 20:11 edent

Reading Geolocation EXIF from HEIC

https://github.com/exif-heic-js/exif-heic-js

edent avatar Nov 20 '20 20:11 edent