[Question]: Set Zoom for the cropper on initilization

[saadsaeed01]

Hi

I have an issue that I wanted to discuss related to setting up the initial Zoom

Let's say when I upload the image the initial state of the cropper is this

Now without Zooming in or Zooming out, I change the position of the crop window and save my entity

If I now save my card the position of the cropper window will persist. The image below shows the position of the cropper window when I save my card and visit the page again

Problem
If I Zoom out or Zoom In in the cropper like this and save the entity

The zoom is not persisted. Check what happened below

I am saving the following Meta Information

• Height
• Width
• ScaleX
• ScaleY
• X
• Y
• Rotate
• OldRatio (Fetched from OnZoomEvent)
• Ratio (Fetched from OnZoomEvent)

On initializing the cropper, I set the non-zoom properties like this in SetDataOptions

And I set the zoom properties by calling the ZoomTo method

Is there a special way to set the zoom of the canvas, unfortunately, I am not very clear about this. Waiting for your response

I am using Blazor Server NET 6 and the package version is 1.2.4 which is the latest stable

Thank you very much!

Regards
Saad

[MaxymGorn]

Hi @saadsaeed01. I suppose this option only available when the autoCrop option had set to the true, see official documentation: https://github.com/fengyuanchen/cropperjs#data

[saadsaeed01]

Hi @MaxymGorn
I have set AutoCrop to true but this is not working. Please see the image

[MaxymGorn]

@saadsaeed01 You can try to use Zoom or ZoomTo, for example in OnCropReadyEvent, because OnAfterRender method cropper component can't be able/ready to receive and perform commands


I might that can help you!
And data on how much you need to zoom in or zoom out can be obtained from OnZoomEvent

Although, you need to save zoom ratio

[saadsaeed01]

Hi @MaxymGorn

Check out this solution, Hopefully, this will help other developers too. This is achieved using OnReadyEvent

Thank you for your valuable input :)

Regards
S