Croppie: Set min/max zooming

[maximivanov]

I see there was some discussion regarding controlling zoom in #49 but I believe it deserves its own issue.
What are your thoughts on possibility to limit zoom values? E.g. in my case I need to limit output image (user avatar) to some min dimensions - thus zooming in should stop at some point to not make picture pixelated.
I realize setting min/max zoom makes sense after binding image when we know its dimensions.

Is there any way I can achieve it now or are there any plans on adding this feature?

[thedustinsmith]

I want to add it, but to me, I haven't heard a good pitch for how it would work.

Someone once said they see croppie used more for spitting out several images at a certain dimension. So they would set the zoom limits (and initial value, might as well toss that in here as well) before binding the image.

I'm with you, I don't think the zoom limits make much sense without knowing the image dimensions first. Yet, I still don't know what I would do with the image dimensions after I have them. The min zoom is pretty easy (with enforceBoundary: true), but the max zoom is where I'm a little foggy.

Maybe we should just add methods setMinZoom and setMaxZoom and call it quits?

Do you have any better ideas?

[maximivanov]

My use case is: I want user to upload an avatar, result must be a square image of 600x600px.

1. When user uploads image larger than 600px: min zoom depends on image (user can zoom out to select some area), max zoom = 1 (so image doesn't get pixelated)
2. When user uploads image 600x600: min zoom = max zoom = 1
3. When image is smaller than 600px: min zoom = max zoom = some value smaller than 1 (image is zoomed in enough to fill a square. Result will be pixelated. Lock zoom so that user can't make it even more pixelated).

What would setMinZoom and setMaxZoom do internally?
I tried hacky solution with setting range input min/max values directly - it seems to work fine regarding locking zoom to given values but side effects are mouse scroll on image breaks zoom and the resulting image size is not of viewport size.

I've put a small demo with 4 different image sizes to see how it behaves: https://jsbin.com/bijofavuke/edit?js,output

[LorenzGardner]

My issue is when the user uploads a much large issue that is very lop sided. For instance 2000x300 image with a view port of 200x200. With EnforcedBoundry they can only zoom out (shrinking the image) until the smaller dim matches the view port. They can never zoom out enough to shrink the image to fit in the view port.

If I set EnforcedBoundry to false, then they can't move the image up or down once they zoomed out.

My solution was to add an "autoSetMinZoom" option that did minZoom = Math.min(minW, minH) instead of Math.max (like EnforcedBoudnry). And acted like EnforcedBoundry was set to false everywhere else so the user could move the image around to corp it once zoomed out.

But if I set the the shape to a circle you actually need to zoom out even further or you can't get the entire image in. So I resorted to a Math.min(minW *.7, minH *.7). But if the shape if view-port is rectangle that isn't needed.

In general we need access to change the zooming behavior, as there are just going to be a lot of diff needs. You can try to anticipate them all and have a list of zoom modes, or you can give access to the minZoom and maxZoom and let us set it. That breaks the abstraction a little bit but keeps things flexible.

[bammoo]

Why current maxZoom is 1.5?

[knlodha]

Do we have access to min and max zoom ??

[winternet-studio]

In my case I currently don't have a great need to set a minimum zoom but I do have a need to avoid it being zero! A value of 0 doesn't make sense. Can it be made possible to prohibit the slider being all the way to the left causing a value of 0?

[steampilot]

Desperately in need of changing the MaxZoom on a dynamic basis!

[lightframes]

I need MaxZoom too. It should be a dynamic parameter. PLease could you add it to your script?

[Pittan]

Any updates for this? I need MaxZoom, too 😢

[andreasRu]

I needed to set maxZoom to maintain qualitiy and minimal width of the cropped image. So I changed the function updateZoomLimits() in croppie.js with this:

updateZoomLimits.txt

Let's say I need a cropped image with a minimal width of 400px. Now I can just add the option maxZoomedCropWidth just like:

$('#demo-basic').croppie({
viewport: {
width: 150,
height: 200
},
maxZoomedCropWidth: 400,
url: 'demo/cat.jpg'
});

This will ensure mininal width of the cropped image to be at least 400px, and adjust MaxZoom-factor automatically to get that value.

For the case an image is uploaded that has a natural width below the maxZoomedCropWidth of 400px, the cropped image will maintain the original width of the uploaded image, but zooming won't be possible anymore. Better to ensure that the uploaded files width is equal or larger than the 'maxZoomedCropWidth'

Hope that may help others!

[kosgdk]

Please PR this.

[seyfer]

@claudio10 yes please create PR

[kosgdk]

Created PR: https://github.com/Foliotek/Croppie/pull/576

[andreasRu]

@kosgdk I'm not that active at github, registered at github just to share this. so many thanks for creating PR #576

[zdennis]

This issues add a nicety to Croppie, but this can all be done right now by the caller.

For anyone who needs this the just take the relevant code from the #576 :

imgData.width * vpData.width / imgData.width / self.options.maxZoomedCropWidth

Move this out to your code:

const image = new Image();
image.onload = () => {
  const boundaryDimensions = { width: 400, height: 400 };
  const viewportDimensions = { width: 370, height: 370 };

  const desiredMaximumWidth = 300; // pixels
  const maxZoom = image.width * viewportDimensions.width / image.width / desiredMaximumWidth;

  this.croppie = new Croppie(this._croppiePortal.nativeElement, {
   boundary: boundaryDimensions,
    viewport: viewportDimensions,
    enableOrientation: true,
    enforceBoundary: false,
    maxZoom: maxZoom,
  });
};
image.src = srcUrl;

[Dinesh-Wasnik]

@maximivanov
I set min and max value in slider , to avoid minium and maxium zoom
$('.cr-slider').attr({'min':0.5000, 'max':1.5000});

I used this on image load, sample code is below

reader.onload = function (event) {
                  $image_crop.croppie('bind', {
                    url: event.target.result
                  }).then(function(){
                    $('.cr-slider').attr({'min':0.5000, 'max':1.5000});
                  });
                }

[pc0de]

awesome