aspectRatio not working

[grighth12]

I want to make a crop area ratio that changes with the click of a button. Declared the ratio to state and set it to aspectRatio for the Cropper component.

Like this,
const [ratio, setRatio] = useState(1); .... <Cropper ... aspectRatio={ratio} ... />

However, even if the ratio changes, there is no change in the screen.

I added a button to the demo to set the ratio. but it's not working
Here is codesandbox : https://codesandbox.io/s/react-cropper-ratio-o8p5g?file=/src/Demo.tsx:1319-1900

any solution?

[shekhar-shubhendu]

@grighth12 you need to use the cropper instance or ref to change the aspect ratio after initialisation

[LordTep]

@shekhar-shubhendu how do I update the aspect ratio after that has been done? Similar to this demo https://fengyuanchen.github.io/cropperjs/ .

In that code .destroy() is called on the instance and then a new one is recreated from image and options.

So I have a working cropper with a locked in aspect ratio. But I want the same button group with different aspect ratios so that I can switch between them.

EDIT: It is actually working, what I'm missing is the blue cropperbox updating it's ratio. That happens only after I try to resize it. I would like for it to happen on button click

EDIT#2: I made it work by setting size to width++ and width-- directly after. It does update the cropped area size to obide by the new aspectRatio.

const wiggleCropper = () => { const data = cropperRef.current.getData(); data.width++; cropperRef.current.setData(data); data.width--; cropperRef.current.setData(data); }

[shekhar-shubhendu]

@shekhar-shubhendu how do I update the aspect ratio after that has been done? Similar to this demo https://fengyuanchen.github.io/cropperjs/ .

In that code .destroy() is called on the instance and then a new one is recreated from image and options.

@LordTep Thanks. I will check if this can be also handled. I saw the setAspectRatio bit earlier in the cropperjs doc and thought it will do the trick but now I see that it does not work after initialisation.

[grighth12]

@LordTep
I've tried this method, like this,

{ratio === 1 && <Cropper ... ratio={1} />} {ratip === 4/3 && <Cropper ... ratio ={4/3}

There was a problem with the screen blinking when the ratio changed.

EDIT : and i tried console.log(ref.current.getData()) but there's an error "TypeError: ref.current.getData is not a function". How did you do it??

@shekhar-shubhendu
As you said, the cropbox element(doucment.querySelector(".cropper-crop-box) could be resized using the cropper's ref. However, when clicking, moving, zooming in, or shrinking the cropBox, there was a problem that the cropBox size returned to its original size.

It's not a completely accurate code, but I did it like this.

simple codesandbox: https://codesandbox.io/s/react-cropper-ratio-o8p5g?file=/src/Demo.tsx
Clicking the button changes the size of the cropBox(120px * 120px), but when you click the cropBox returns to its original size.

do you have any other ideas?

[LordTep]

@shekhar-shubhendu cool thanks,
@grighth12 I actually right now just thought of that. Destroying the whole react component and recreating with a new aspect ratio. Because I have the same problem with the preview window, it does not seem to update it's position on aspect change... Nice one! A flicker could be hidden behind some loading overlay I guess.

[shekhar-shubhendu]

is this something that you want?
https://codesandbox.io/s/react-cropper-ratio-forked-tn18k?file=/src/Demo.tsx

[LordTep]

@shekhar-shubhendu that's perfect! Thanks

[grighth12]

@shekhar-shubhendu Thank you!!!!!!!!!!! <3<3 That's exactly what I wanted!!!