CODEWITHSUNDEEP
react-nativereact-native-ios
1110
1110

Reputation: 6829

How to get jpg image from heic format in react native

I am picking photos from gallery and upload to server but since few days I noticed that some photos have extension heic and browsers can't render those images.

1. Is there a way to extract photos from uploaded heic?
2. How in react native I can get jpeg from this format?

Upvotes: 13

Views: 17818

Answers (3)

Erik Rybalkin
Erik Rybalkin

Reputation: 1251

Here's my solution: I am using react-native-image-crop-picker.

In my case, the server doesn't accept if a filename is .HEIC, telling me to use .png or .jpg
So I just:

image.filename.replace(/HEIC/g, 'jpg')

To give you a whole picture:

const formData = new FormData();
formData.append('file', {
  uri: image.path,
  name: image.filename.replace(/HEIC/g, 'jpg'),
  type: image.mime,
});

return await axios.post(`/avatar/${id}`, formData);

Upvotes: 2

MrBrownser
MrBrownser

Reputation: 171

I'm assuming you are using react-native-image-picker, which is the community library and most used one.

Actually is not necessary to install another module, just grab always the uri from the response and update the filename in case you are having a heic image. Code example:

const options = {
    title: 'Select Avatar',
    storageOptions: {
    skipBackup: true,
    path: 'images'
    },
    noData: true,
    quality: 1,
    mediaType: 'photo'
};

ImagePicker.showImagePicker(options, imgResponse => {

    this.setState({ imageLoading: true, avatarMediaId: null });

    if ((imgResponse.didCancel) || (imgResponse.error)) {
        this.setState({ imageLoading: false });
    } else {
        let source = {};
        let fileName = imgResponse.fileName;
        if (Platform.OS === 'ios' && (fileName.endsWith('.heic') || fileName.endsWith('.HEIC'))) {
            fileName = `${fileName.split(".")[0]}.JPG`;
        }
        source = { uri: imgResponse.uri, fileName };
        this.uploadImage(source);
    }
});

Upvotes: 2

Vishwesh Jainkuniya
Vishwesh Jainkuniya

Reputation: 2839

You can convert it on the server side, with the help of this awesome lib Tifig.

https://github.com/monostream/tifig

You can also use API's like https://cloudconvert.com/formats/image/heic to convert either on server side or on the mobile (client side).

Upvotes: 11

Related Questions