change the stencilComponent to use an oval instead of a circle or rectangle? about react-advanced-cropper

[Norserium]

@CalvinJamesHeath, if you use the canvas to get the cropped image, you can use the native approach:

const canvas = cropper.getCanvas({
        height: 600,
        width: 600,
})

[CalvinJamesHeath]

stencilProps={{
grid: true,
movable: cropperEnabled,
resizable: cropperEnabled,
lines: cropperEnabled,
handlers: cropperEnabled,
rotatable: cropperEnabled,
overlayClassName: cn(
'image-editor__cropper-overlay',
!cropperEnabled && 'image-editor__cropper-overlay--faded',
),
}}

[CalvinJamesHeath]

So at advanced cropper it says : To customize the default stencils you should pass props to stencilProps props as object (read link in detail). However the link is broken.

[Norserium]

@CalvinJamesHeath, do you want to get the following result?

[CalvinJamesHeath]

I'm attempting to accomplish the following with the CircleStencil or any other tool you deem appropriate.
What I want to achieve:

What I get with the default configuration:

Also with the desired oval cropped image, I also want to show the image preview besides the cropper.

Thank you @Norserium

[CalvinJamesHeath]

And the desired cropper should not strech all the way to the circle stencil, but only to the width of the oval stencil

[CalvinJamesHeath]

// // ellipse / oval css .advanced-cropper-circle-stencil__draggable-area, .advanced-cropper-circle-stencil__overlay, .advanced-cropper-circle-stencil__preview, .advanced-cropper-circle-stencil__grid { position: relative; height: 100%; width: 90% !important; }; What I targeted for the example

[Norserium]

@CalvinJamesHeath, I don't get you. The circle stencil limits aspect ratio to 1/1, so you should create your own stencil or customize the rectangle stencil.

[CalvinJamesHeath]

Well then I guess my question is how to do that. Can you pass a default aspect ratio that can expand or shrink but always look like an oval? I opened another issue before because the "Create your own Custom Stencil section link" was invalid.

Thanks again.

[CalvinJamesHeath]

So I added stencilProps={{aspectRatio: 4 / 5, }} for an ellipse/oval aspect.
How do I get back the preview lines or oval shape inside the handler? Because the previewClassName only shows if Im using the CircleStencil.

[CalvinJamesHeath]

The preview className works perfectly, I used:
.preview { border: dashed 2px rgba(255, 255, 255, 0.764); border-radius: 50%; }

Thank you.

[Norserium]

@CalvinJamesHeath, you are welcome!

[CalvinJamesHeath]

I have a question about image cropping. When I load an image into the cropper, it has its unique width and height. However, when I save the cropped image and resize it to be 600x600 in the backend, the resulting image dimensions differ from the initial cropped dimensions.

Is there a way to set a predetermined width and height for any image added to ensure consistency in the final cropped image?