Display apples heif images in web

Question

Apple has introduced heif technology with iOS 11. On my website some iPhone users now want to upload these pictures in the same format (no idea if you can convert them to JPEG in iOS, I'm using Android and can't test it). If I now allow them to upload heif images, how can I display them in the browser? I've tried a little bit, but unfortunately it doesn't work with a simple HTML img tag. Can I display this in a different way, relatively compatible, or do I have to convert the whole image?

Answer 1

I also have the app in which it involved to upload images from iPhone. So, for basic solution what we did was converting the heif images to jpeg on iOS before uploading them to server. I would suggest you to do the same, as that would avoid your add-on to show heif images on web. Steps involved in converting to jpeg image are as follows -

1. get the heif imageData from asset using

   • (PHImageRequestID)requestImageDataForAsset:(PHAsset *)asset options:(nullable PHImageRequestOptions *)options resultHandler:(void(^)(NSData *__nullable imageData, NSString *__nullable dataUTI, UIImageOrientation orientation, NSDictionary *__nullable info))resultHandler;

2. getting the image from imageData returned from the above method using

   UIImage *image = [UIImage imageWithData:imageData];

3. converting the image to jpeg image data using

   NSData *jpgImageData = UIImageJPEGRepresentation(image, 1.0);

Now you can use this jpgImageData to be uploaded to server. Hope this helps you resolving your problem.

Answer 2

Try this https://github.com/nokiatech/heif NOKIA provide HEIF Reader JavaScript Implementation.