Cropper: Set max zoom to natural height/width of image

[jwfurness]

Looking for a way to limit the zoom level to the natural height/width of the original image. Doesn't look like this functionality is built in (?)

[juliandormon]

I concur - setting a max zoom would be great. Perhaps a decimal factor would be more flexible, such as 1.2 or 2.5 the size of the image. A callback when reached would be sweet as well - so we could notify the user why the zoom stopped. This would be really helpful when using the zoom in real world cropping for printing situations where image resolution would only permit so much zooming before quality becomes an issue.

[fengyuanchen]

Use the zoomin and zoomout events:

function stopZoom (e) {
  var image = $(this).cropper('getImageData'),
      zoomLevel = image.width / image.naturalWidth;

  if (zoomLevel > 10 || zoomLevel < 0.1) {
    e.preventDefault();
  }
}

$('img').cropper({
  zoomin: stopZoom,
  zoomout: stopZoom
});

[ktsakas]

The problem with using this function is that the zoom will not stop exactly at 10 or 0.1.
It will always slightly over or under the limits.

[cossssmin]

@ktsakas you could Math.ceil that number, though that would mean less granular control over the zoom level.

The real problem with this is, once you hit that zoom level, you're stuck: you won't be able to zoom back.

[micros123]

It's true it's not precise and gets stuck, but:
If you only want to have max zoom, then only have this function listen for the zoomin event and not the zoomout. Then check if zoomLevel > 1. Optionally, set the naturalWidth/naturalHeight as width/height via setData in order to get to a zoomLevel of exactly 1.

[aleemb]

+1 Seems like this is a very common use-case but it seems there isn't any good way to achieve this. I also ran into both, the getting stuck and accuracy issues.

[trinzia]

+1
Agree that user may not understand why his image is blurry at 500% zoom.

[tinybigideas]

+1

[justclimber]

+1

[fengyuanchen]

With v2.0.0, you can use zoom.cropper event and zoomTo method to implement this:

$().cropper({
  zoom: function (e) {
    if (e.ratio > 1) {
      e.preventDefault();
      $(this).cropper('zoomTo', 1);
    }
  }
});

[jasperkuperus]

The solution above doesn't work for me. The ratio is actually available under e.detail.ratio.

[dragosstancu]

this worked for me:

$().cropper({
    zoom: function(e) {
                console.log('zoom', e.detail.ratio);
                if (e.detail.ratio > 1) {
                    e.preventDefault();
                    $(this).cropper('zoomTo', 1);
                }
    }
});