Image is too large on upload into croppie, set default zoom to 0

[NeoRoussel]

Hi, I recently decided to implement croppie into my project and it's working great! There is just one issue that I have with it : on upload, images that are quite large are very zoomed in (see actual behavior below) and I would like to set their default zoom to 0 (so that the image fits the container basically, see expected behavior). I've tried stuff like el.bind { points:[...] }, el.setZoom() and el.initialZoom but none seem to work. I'm on Windows, Firefox 90.0.2 (64 bits).

Expected Behavior

Actual Behavior

My code :

var cropElement = new Croppie(classEl('modal-crop-image'), { viewport: { width: cropSize, height: cropSize, type: 'square' }, initialZoom = zoomer.min }); cropElement.setZoom(0); cropElement.bind({ url: imageURL, zoom: 0, });

with cropSize being the value that I get from my uploaded image to determine the viewport's size.

Thanks for your help! :)

[NeoRoussel]

Hi again, so I've found a solution, as precised in the important notes, the problem came from the bind function being called while the modal hasn't appeared yet. If you have the same problem check it out ;)

[talha2k]

@NeoRoussel That was the issue in my case.

Code to fix it:

$("#croppieModal").on("shown.bs.modal", function (e) { $uploadCrop.croppie("bind"); });