Zoom on crop box center - Question

[nhwilly]

Great library, thank you for making it.

I've got this working now and I'm down to a question that's a little hard for me.

My crop box is fixed and extends to the entire container. The user selects what they want to crop by moving and zooming the image. I'm using a MudSlider to do the zooming part.

But since I'm using the Zoom method instead of the ZoomTo method, it is zooming on the center on the image, not the coordinates of the center of the crop box.

As a result, the image area under the crop box appears to move in the direction of the center of the image - and that makes perfect sense.

You can see that here - I've not moved the image, but I have moved the slider and the image shifts:

So I think I should use the ZoomTo method and provide the coordinates by calculating where the center of the crop box falls on the image. I believe if I can do that, the crosshairs in the center will stay centered as the image enlarges.

I just don't know which method calls to use to make that happen. It must be a ratio of some kind between the crop box and the image, but I can't figure it out.

Has anyone else done this - or does anyone have any pointers?

Thanks.

---

For the record, I have disabled WheelZoom. I need to have a slider there for mobile and I could never get the slider and the OnZoomedEvent coordinated properly, so I just gave up.

[MaxymGorn]

Hi @nhwilly. I see your question!

In original logic ZoomTo method used for zoom the canvas (image wrapper) to an absolute ratio: https://github.com/fengyuanchen/cropperjs#zoomtoratio-pivot

But Zoom method used for zoom the canvas (image wrapper) with a relative ratio: https://github.com/fengyuanchen/cropperjs#zoomratio

Comeback to your case you should to use ZoomTo with this parameters: CropperComponent?.ZoomTo(ratio, 0, 0);, where the ratio is an approximation coefficient, for example 1 ratio - 100%, 2 ratio - 200% and so on Moreover, you can see example implementation in demo site:

Code:

[nhwilly]

Thanks for the quick response.

I tried your example in the demo, and the crosshairs still shift a bit.

The image is going to shift around no matter what I do.

This is turning out to be more trouble than it's worth. Everything else is running smoothly. Thanks, again.

[MaxymGorn]

@nhwilly I wonder if you can try if it works the same in the original version of the library on their site:https://fengyuanchen.github.io/cropperjs/?

[nhwilly]

I'll try that. Thanks

[MaxymGorn]

@nhwilly hmm, seems It's a small problem with style crosshairs. Perhaps centering this crosshairs can fix this problem!

When I make crosshairs so bigger I obviously faced more expressively this problem!

[nhwilly]

Their demo works the same way, so this isn't something wrong with your library.

In their case, the crop box stays in the viewing area in the same place relative to the image, which is expanding.

So it appears the crosshair is moving, but it's not. The image is moving.

See below - this is what I wanted to happen.

I am centering the crosshair between his eyebrows and on each zoom, the crosshair stays there.

You can see what I'm trying to achieve, but it may, in fact, not be possible, because the extent of the image, it can no longer shift around without scrolling out of the container.

I'm using Vm3 to fill the container so no background shows.

I don't want to impose on your time, so don't feel obligated to figure this out, when, like I mentioned, it might not be possible/practical.

[MaxymGorn]

@nhwilly I have alternatives solution, we can try to use Scale for this case, for example: CropperComponent?.Scale(<YourScaleValue_1>, <YourScaleValue_2>); Example getting current previous scale x or y value, which come from OnCropEvent, for example