Как избежать увеличительного зума, который имеет мой cropbox в Cropper js?

Я использую Cropper JS от fengyuanchen. Когда мой кроппер загружается, все выглядит нормально. Но когда я изменяю размер окна, кропбокс увеличивает изображение.

Вот как он загружается:

enter image description here

И вот как это заканчивается после изменения размера окна:

enter image description here

В окне кадрирования есть эффект масштабирования, который мне не нужен. Я хотел бы иметь возможность изменять размер окна и избегать эффекта масштабирования в cropbox. Ниже приведены мои характеристики кропбокса и контейнера:

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>

Спасибо!

Я столкнулся с той же проблемой. Я думаю, что в текущей версии есть ошибка, поскольку кадрирующий бокс, похоже, хочет бесконечно масштабироваться, чтобы соответствовать тому, что, по его мнению, делает изображение. Установка опции restore в false, похоже, по крайней мере, устраняет бесконечное масштабирование, но ценой того, что при изменении размера окна cropbox возвращается к начальному значению по умолчанию.

const cropper = new Cropper(image, {
                    restore: false,
                });
Вернуться на верх