Как избежать увеличительного зума, который имеет мой cropbox в Cropper js?
Я использую Cropper JS от fengyuanchen. Когда мой кроппер загружается, все выглядит нормально. Но когда я изменяю размер окна, кропбокс увеличивает изображение.
Вот как он загружается:
И вот как это заканчивается после изменения размера окна:
В окне кадрирования есть эффект масштабирования, который мне не нужен. Я хотел бы иметь возможность изменять размер окна и избегать эффекта масштабирования в 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,
});