How to change Image Size in Cropper?

[saidattax]

Code

                     <CustomCrop
                        updateImage={updateImage}
                        rectangleCoordinates={coords}
                        initialImage={image}
                        height={height}
                        width={width}
                        ref={(ref) => {
                            customCrop = ref;
                        }}
                        overlayColor="rgba(18,190,210, 1)"
                        overlayStrokeColor="rgba(20,190,210, 1)"
                        handlerColor="rgba(20,150,160, 1)"
                        enablePanStrict={false}
                    />

I'd need the Image Cropper Area (Red Border Box) to expand a bit down, so the image is seen big enough to adjust crop points

[SL-A-SH]

I am using RNCamera module so I forced the orientation to portrait mode. It is coming in full screen with portrait mode.

[SL-A-SH]

Were you able to fix this? I am facing the same issue now if I use an image picker library.

[saidattax]

@SL-A-SH Yes, a workaround is, first make sure your photo is in portrait mode from your camera, then pass the value of of the longest side of photo to the height , in this way the photo is always fullscreen.

If you keep the width as longest then it will display as in the above issue.

so just supply the prop of height as

import ImageCropModule from "react-native-perspective-image-cropper";

<ImageCropModule
  ...
  height={Math.max(height, width)}
  width={Math.min(height, width)}
  ...
/>;

[SL-A-SH]

The issue is fixed but cropping is not working correctly now. It is only crops half the image.

[MITDD6338]

when clicking the image then cropper is not open
anyone can help us? @abstruse9 @SL-A-SH

"react": "16.8.3", "react-native": "0.59.10", "react-native-perspective-image-cropper": "^0.4.3", "react-native-svg": "^9.13.3"

Platform : IOS I was Use https://github.com/Michaelvilleneuve/react-native-document-scanner

then same page display image and then I can use this package with same page https://github.com/Michaelvilleneuve/react-native-perspective-image-cropper

but crop code is not working

[SL-A-SH]

@MITDD6338 Post your error or a screenshot

[saidattax]

@SL-A-SH Strange. Try logging the coordinates of the image in the cropper module's index.js file in the crop() method, and cross verify if the Cropper's coordinates match your area selection

[SL-A-SH]

@abstruse9 No it does not match. The top left and top right coordinates are starting from half of the image. Also note that my image was captured in landscape mode not portrait mode since I cannot ensure the image taken was in landscape or portrait. So when the image was taken in landscape mode and with your solution the image inside cropper is centered in the screen with black spaces above and below it and not just in the top like in the screenshot you posted.

[MITDD6338]

@SL-A-SH

see image and video

[saidattax]

@SL-A-SH

Can you post an example screenshot of your photo? and how it is aligned?

[MITDD6338]

https://drive.google.com/file/d/1FVrTt0N5cKh9EsqGnI4Y7mH_iLlEPCMA/view?usp=sharing @SL-A-SH

[MITDD6338]

@abstruse9 your crop can be open?

[SL-A-SH]

@abstruse9

This is how it appears inside cropper. The image was taken in landscape mode and is coming in the center of the screen due to your solution.

This is how it appears after cropping. Notice only half of the card is cropped even though the whole card is selected.

[SL-A-SH]

@MITDD6338 Have you linked this package correctly for IOS? If yes can you also post your Cropper Component where you implemented this package.

[saidattax]

@SL-A-SH

So the way this package was probably implemented, if you take photos in landscape mode, and supply the height as long side of image, then the cropper area will be swapped, hence why you're getting wrong crop. Because Image Height does not match with Cropper Height Setting.

My solution would only work if you force all images to display as full size portrait.

If it's shot like landscape (centered with black spaces above and below) then you need to pass original image dimension values.

I too am not sure about this, I didn't test it. But this package has poor aspect ratio support.

[MITDD6338]

@SL-A-SH

yes I was linked

[MITDD6338]

@abstruse9
How can your Crop border like blue is visible? can u share with because my crop was not open

[SL-A-SH]

@abstruse9

But this package has poor aspect ratio support.

I agree with you.

If it's shot like landscape (centered with black spaces above and below) then you need to pass original image dimension values.

If I pass the original image dimension values then the image will not be centered in the screen. It will show in the top of the screen like in your screenshot and that's just bad UX.

[MITDD6338]

@SL-A-SH can u help with I share my implementation code

[SL-A-SH]

@MITDD6338 Can you just try picking an image from an image-picker and implement it with the cropper and see if it works? Also can you open a new issue as this one is closed and other people might be able to help you too.

[MITDD6338]

@SL-A-SH okay