How to avoid the magnifying zoom my cropbox has in Cropper js?

user_9133302 0
Viewed 124

Im using Cropper JS by fengyuanchen. When my cropper loads everything looks ok. But when I resize the window the cropbox zooms in the image.

This is how it loads:

enter image description here

And this is how it ends after the window resizing:

enter image description here

The is a zoom effect in the cropbox that I don't want. I'd like to be able to resize the window and avoid the zoom effect in the cropbox. Below are my cropper and container specifications:

Cropper:

croper() {
                const image = document.getElementById('image');
                const cropper = new Cropper(image, {
                    responsive:false,
                    autoCropArea:1,
                    zoomable:false,
                    movable: false,
                    aspectRatio: NaN, viewMode: 2, crop(event) {
                        console.log("***********************************");
                        console.log(event.detail.x);
                        console.log(event.detail.y);
                        console.log(event.detail.width);
                        console.log(event.detail.height);
                        console.log(event.detail.rotate);
                        console.log(event.detail.scaleX);
                        console.log(event.detail.scaleY);
                        this.data = this.cropper.getData();
                        document.getElementById("demo").innerHTML = JSON.stringify(this.data);
                        var contData = cropper.getContainerData(); //Get container data
                    },
                });
                cropper.setCropBoxData({ height: contData.height, width: contData.width  }) //set data
            }

Container:

<div class="col-md-8 col-sm-6 grid-margin stretch-card"  id="image_box" align="center">
            <div class="card text-center" style=" overflow: hidden; height: 100vh;">
                <!-- <div class="card-body"> -->
                <!-- <label id="file-drag"> -->
                <img id="image" style="max-width: 100%; display: block; " src="static/template/{{img}}.png" alt="Preview">
                <span id="preview">La vista previa de la imagen de la plantilla irá aquí</span>
                <!-- </label> -->
                <!-- </div> -->
            </div>
        </div>

Thanks!

cropperjs django html javascript
1 Answers

I have been encountering the same issue. I think there is a bug in the current version as the cropbox seems to want to infinitely scale to match what it thinks the image is doing. Setting the option restore to false seems to at least fix the infinite zoom, at the cost of the cropbox resetting to the default initial box when resizing the window.

const cropper = new Cropper(image, {
                    restore: false,
                });
user_137796630
Related