ImageManipulator.manipulate rotate squeeze the image (iOS)

[mubeenahmed]

Hi,

I’m using sdk 24 and i just import and used ImageManipulator like
const manipResult = await ImageManipulator.manipulate( this.state.image, [{ rotate: angle }, { resize: { width: 640, height: 640 } }], );
and it works great with angle 90 and -90 but when i changed angle from 90 to 45, 30, 15 than it reduces the image dimension.

Kindly help me with this issue

Thanks

[esamelson]

Hi @mubeenahmed - this is because it has to squeeze the whole (rotated) image into a non-rotated rectangle of whatever dimensions you specify, in this case, a 640x640 square.

If you want the original dimensions to be respected in the newly rotated image, you’ll need to calculate different width and height in your resize object. For example, something like

const angleRadians = angle * Math.PI / 180;
const side = 640 * (Math.sin(angleRadians) + Math.cos(angleRadians));
const manipResult = await ImageManipulator.manipulate( this.state.image, [{ rotate: angle }, { resize: { width: side, height: side } }], );

(no guarantee this math is correct )

[mubeenahmed]

Hi @esamelson - thanks,

I tried this solution but still facing the same squeeze issue.

[esamelson]

Hi @mubeenahmed - I’m not sure I understand your problem in that case. Could you post some screenshots to illustrate, perhaps?

[mubeenahmed]

When i select an image from gallery

[mubeenahmed]

and when i rotate image than

@esamelson you got my point now?

[esamelson]

Hi @mubeenahmed - I see, that is weird. @aalices, do you have any idea what’s going on here?

As a workaround, you could try just using a larger base image with some extra whitespace around the sides – it looks like it may not be trimming off very much of the image.

[aalices]

Hello @mubeenahmed can provide a snack if this issue? This would be easier to debug - I am not sure if the last image contains a picture rotated once by 90deg or twice by 45deg.

[mubeenahmed]

Sure @aalices
@esamelson

here it is

Image Upload - Snack

waiting for your response guys.

Thanks