Corrupt JPEG Written to Temp Storage on iOS 11.3 if `compressImageQuality` Unset

[medelman17]

Version

Tell us which versions you are using:

• react-native-image-crop-picker v0.20.1
• react-native v0.54-55.2

Platform

iOS 11.3

Expected behaviour

RNICP should write universally valid JPEG files to temporary storage at path image.path when user selects HEIC image(s) from camera roll regardless of whether compressImageQuality is set.

Actual behaviour

When a HEIC image is selected on a real device in multi-picker, the temporary file written to image.path is partially corrupt unless compressImageQuality is set. Images written to image.path without compressImageQuality setting are reported as invalid by my image-processing pipeline, which uses Sharp. Further, these images cannot be displayed in a browser using an image tag (although they can be downloaded and viewed in a standalone image viewer--preview in my case). This does not occur if the image is captured by RNICP's camera. Adding compressImageQuality to the ImagePicker.openPicker options cures the problem.

I'm not sure when this bug was introduced or how, but I was updating a currently deployed app that uses RNICP without specifying the compressImageQuality setting and have not run into this issue previously.

Steps to reproduce

1. Select HEIC image from iPhone running iOS 11.3 using ImagePicker.openPicker({ multiple: true, includeExif: true }).

2. Upload jpg file at image.path to S3 using a signed URL with XHR specifying image/jpeg as the content type.

3. Attempt to view image in browser and/or run any sort of post-processing on the image.

4. Pull hair out for ~6 hours.

Attachments

// stacktrace or any other useful debug info

Error: Input buffer contains unsupported image format

Love react-native-image-crop-picker? Please consider supporting our collective: 👉 https://opencollective.com/react-native-image-crop-picker/donate

[ivpusic]

do you have some time to send a pull request?

[medelman17]

I will certainly give it the old college try; however, I’m no Native coder. That said, I’ve always wanted to learn more. So, will try and figure it out this weekend.

[PaitoAnderson]

I have this problem too, I think it's actually just the original heic file that gets written with a .jpg extension.

[fubar]

I might be able to help with this. I was wondering though if there is a case to be made for keeping images in their original HEIC format when no modification (cropping, resizing, compression etc.) is desired. On the contrary though I agree that this lib should provide a consistent interface and always spit out jpegs. What are your thoughts on this? @ivpusic

[fubar]

Thinking about this a bit further, I think it would make sense to always convert to jpeg if the image is neither jpg, png, gif, or tiff. The current behaviour is that these file types are not converted to jpg but stay in their original format if no image modifications are desired, and I think it should stay like that (think screen shots or images saved to the library from websites). If you all agree I'll look at getting this fixed.

[ivpusic]

@fubar sounds good

[wonday]

It is the same problem with #681 ? Is it OK, if you select one file?

[fubar]

PR: https://github.com/ivpusic/react-native-image-crop-picker/pull/735

[jasongaare]

Looking forward to hopefully a resolution to this via PR ^

In the time-being though, "Adding compressImageQuality to the ImagePicker.openPicker options cures the problem." As mentioned in the initial issue is a solid workaround for my use case.

[yborunov]

Same problem with HEIC images without the compressImageQuality option set

[Caundy]

Also experiencing this issue when selecting heic images with { mutliple: true } in picker's options, sharp throws "Error: Input buffer contains unsupported image format". Has anyone found a workaround?