React-native-image-crop-picker: iOS11 HEIC/HEIF format support?

[MasahiroMorita]

Platform

• iOS11

Background

iOS11 started to support HEIC/HEIF image and video format.
However, other platforms such as Android and Web browsers don't support this image format.

It is very convenient if the image picker has a function to convert HEIC/HEIF images into a general format when a user picks these images.

Proposal

Add compatibilityMode property to the request object, to request the image picker to convert its' image format to general one.

[alfonso1003]

I'm currently working on a custom module to convert HEIC to JPG. Here's some Objective C code that does that.

NSString *heicImageFilePath = @"<file/path/to/heic/image>";
NSString *ext = [heicImageFilePath pathExtension];
if ([ext isEqualToString:@"heic"]) {

   // create new jpeg file from input heic filepath
    NSString* fname = [imageFilePath stringByDeletingPathExtension];
    NSString* newJpgPath = [fname stringByAppendingPathExtension:@"jpg"];;

    NSURL *url = [NSURL fileURLWithPath:imageFilePath];
    NSData *data = [NSData dataWithContentsOfURL:url];
    UIImage *image = [UIImage imageWithData:data];
    NSData *jpgImageData = UIImageJPEGRepresentation(image, 0.7);

    [jpgImageData writeToFile:newJpgPath atomically:YES];
}

Next, once I've created a jpg from the heic, I will recreate the dictionary found on line 452 of this file:
https://github.com/ivpusic/react-native-image-crop-picker/blob/master/ios/ImageCropPicker.m#L452

Then, finally, I'll wrap the code around the RCT_EXPORT_MODULE, RCT_EXPORT_METHOD and return the dictionary.

This all seems overly complicated, but I haven't had any luck updating the react-native-image-crop-picker code to worth with an HEIC file directly. My easiest option now is to convert the heic file to jpg and then work with that.

[alfonso1003]

Please disregard my previous comment. The idea there was to convert the HEIC image file to a JPG in a React Native custom module. Then, I could work with the JPG images in my code. That idea works in theory, but I found it unnecessary.

Here's what I did instead:
In my app, I needed to take the response object and upload it to a server. I was passing response.filename and response.path. Upon further inspection, when react-native-image-crop-picker was grabbing data from my iPhone, the filename it provided was for an HEIC file and the path was for a jpeg file. Because I was passing two different file extensions, my server side code broke. To get around this, I stopped using the HEIC filename provided by the package and generated my own filename. It was literally a one-line solution.

TLDR:
For anybody reading this still having issues, take a look at the response you get back from react-native-image-crop-picker. You might find that the response references both a jpg and an HEIC file. Make sure to use the jpg file since HEIC is new and isn't widely supported.

[MasahiroMorita]

Oh, great!
It works for me. Same as you, I was passing both filename and path either.
I stopped using filename property in response object and replace it with path property.

Thank you very much!

[asutula]

Can anyone verify that the file copy with the jpg extension is actually a JPEG file? My image processing that works with other known JPEG files fails with the copy from react-native-image-crop-picker. I'm suspicious that it's just copying the HEIC file and changing the file extension without actually converting the file type.

[MasahiroMorita]

I have verified the file is JPEG.
It might be wrong, but I think you access the image through response.sourceURL. You should access the selected file via response.path.

[jasdeepsingh]

I have this same issue - My backend currently doesn't have support for HEIC image formats (using ImageMagick on the backend)

Would be nice to convert the image on the client side and get a JPEG image path to send to backend.

[jasdeepsingh]

I’d also like to add here that wether I use response.path, response.filename or response.sourceURL it doesn’t work.

filename for me is a filename with HEIC extension.

[mattslight]

Use response.filename.split('.HEIC')[0] +'.jpg'

[ChenTianSaber]

Can anyone verify that the file copy with the jpg extension is actually a JPEG file? My image processing that works with other known JPEG files fails with the copy from react-native-image-crop-picker. I'm suspicious that it's just copying the HEIC file and changing the file extension without actually converting the file type.

if multiple is false，the result.path is actually a JPEG
if multiple is true，the result.path is a HEIC