How to crop image in React Native

user_3895259 0
Viewed 1823

I'm using react-native-camera to take photos. The taken photos are 16/9 ratio but I need them in 4/3.

Thus what I want is to crop the image to for example 1920*1440.

I use ImageEditor from React Native. The code of ImageEditor can be found here.

My code is as follows :

this.camera.capture(target)
     .then((data) => {
           let cropData = {
               offset:{x:0,y:0},
               size:{width:1920, height:1440}
           };

           ImageEditor.cropImage(
                 data.path,
                 cropData, 
                 (uri) => {
                       this.props.captured(this.props.request, {
                             path: uri,
                             data: data.data,
                             longitude: position.coords.longitude,
                             latitude: position.coords.latitude
                             }
                       );
                       Actions.pop();
                 },
                 (error) => {});
            })
     .catch(err => {
           console.error(err)
     });

But the code above doesn't work. The saved photo isn't cropped and it is 1440*2560.

Any advice?

react-native javascript
1 Answers

It's not entirely clear what happens with your code in captured(), but I think the problem is that you're passing the original data to this.props.captured. My understanding from the docs is that:

If the cropping process is successful, the resultant cropped image will be stored in the ImageStore, and the URI returned in the success callback will point to the image in the store.

So instead of reusing data, you should be reading the cropped image from uri

user_11387100
Related