Мой проект использует:
jQuery v3.6.4, Bootstrap v4.0.0 , & cropper.js v1.5.12 .
in cropper.js v1.5.12, в самых популярных родительских дивизациях коробки классов Cropper-Container Cropper-bg . Высота каждого из этих div увеличивается по мере того, как я пробегаю через несколько изображений, чтобы создать экземпляр коробки обрезки для каждого изображения. Например, 4 изображения, каждое из которых имела ширину 679px и высоту 960px. Когда я прошел через изображения, у первого .cropper-container высота 2849px; 2 -й имел высоту 4991PX; 3 -й имел высоту 9275px; и у 4 -го была высота 17843px. Однако, если я не пробегаю через несколько изображений и что изображение только одно, высота .cropper-container составляет 728px для изображения, имеющего ширину 679px и высоту 960px. Это идеально подходило для изображения (не слишком длинного или короткого для изображения), так как визуализованная ширина изображения составила 500px. В чем может быть проблема и что может быть исправлением?$('#image-upload').change(function(event){
const files = this.files;
if (!files.length) return;
$('#modal-outermost').modal({
backdrop: 'static',
keyboard: false
});
let imageClass = 'images';
let retrievedImageSrc = '';
$.each(files, function (index, file){
const reader = new FileReader();
reader.onload = function (e) {
let imgSrc = e.target.result;
$('.images').each(function(){
retrievedImageSrc = $(this).attr('src');
if(!retrievedImageSrc.length){
$(this).attr('src', imgSrc);
return false;
}
});
};
reader.readAsDataURL(file);
});
});
js для добавления экземпляра Cropper в каждое изображение в модале начальной загрузки
$modal.on('shown.bs.modal', function(){
const images = document.querySelectorAll('.images');
let numImages = images.length;
const croppers = [];
let i;
for (i = 0; i < numImages; i++) {
croppers.push(new Cropper(images, {
aspectRatio: NaN,
viewMode: 2,
preview:'.preview',
dragMode: 'move',
cropBoxResizable: true,
minCropBoxWidth: 320,
minCropBoxHeight: 240,
data:{
width: 640,
height: 480
}
}));
}
});
Модал Booststrap находится в структуре HTML, как SO:
Crop
Cancel
Crop
Cancel
Единственное пользовательское CSS, которое может повлиять на Cropper.js, - это:
img{
display: block;
max-width: 100%;
}
Подробнее здесь: https://stackoverflow.com/questions/796 ... -through-m
