Help cropping square at the center of image using Expo.ImageManipulator


#1

I’m trying to crop the center of an image using Expo.ImageManipulator, but have no luck.

takePictureAsync().then(data => {
    const width = data.width;
    const height = data.height;
});

This is how I create my Crop action:

crop: {
   originX: width / 2,
   originY: height / 2,
   width: width,
   height: width
}

For some odd reason, either the saved image is not properly working (like distorted) or the Image is not getting saved properly with MediaLibrary.createAssetAsync(res.uri); Testing with Expo on an iPhoneX.

Thanks.


#2

Hi @paulcham I think the code of crop you provided is resulting in something like this:
crop

And what you want to acheive is:
cel

the origin is the point of top left corner of cropping box, so you need probably something like

crop: {
   originX: 0,
   originY: (height - width) / 2,
   width: width,
   height: width
}

#3

Thank you! I will try this in a while, thanks for a great job! You’re a legend. @aalices


#4
    originX: (data.height - data.width) / 2,
    originY: 0,
    width: data.width,
    height: data.height

It’s weird but I guess the orientation is switched in iPhone X, I also can’t crop a 4:3 photo. Adding to width, says out of bounds in the original photo, adding to height still crops a square, could this potentially be a bug?


#5

Ah yes, iOS saves images on disk with some defined orientation and contains a parameter inside exif to display the image properly. So if you use takePictureAsync({ exif: true }) it should contain an orientation key. Most probably - if your photo is taken in portrait it saved on disk like it is landscape and probably you need to swap height and width in crop object


#6

Thanks so much! I really appreciate this


closed #7

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.