Cropper JS Questions and Help

Hi All

We have just got cropper js up and running and I want to slow the zoom down so that it takes more clicks to zoom in and out.

The code we are using for zoom is:

zoom: function(e) {
console.log(e.type, e.detail.ratio);

From my research to change the zoom we need to add:

$().cropper("zoom", 0.01);
$().cropper("zoom", -0.01);

But cannot get it working.

Can anyone help?

Also… we have managed to set it is that when an image is loaded it is centered in the canvas part however we cannot work out how to center align, vertically and horizontally, the cutting cropper.

We have found a way to set a value however that is no good as the page is responsive and we have made it so that we can pass the crop width and height via the url so the cutting cropper will be different sizes.

Is there a way to center the cutting cropper to the vertically and horizontally center of the canvas?

If so can you please point me in the right direction.

If not then I think this would be a great feature to add.

Thanks for any help.


@mrmbarnes Please remember to format your code.

I worked out the zoom part and it was very, very easy… in the actual zoom div is the setting… DOH!

I still need help with the centering part though please.

I also found a work around for the copper positioning… I added:


And pass the info via the URL which is working great.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.