Установка минимальных и максимальных размеров для изображений с помощью кроппера
Я использую обрезку для обрезки изображений в круглую форму. По умолчанию размер выбранного изображения изменяется до меньших размеров, например, если исходные размеры изображения 1092x323
, Они становятся 436x128.963
,
Вот живая скрипка http://jsfiddle.net/q9npkbs0/25/, попробуйте загрузить изображение с большими размерами, как 1092x323
а затем искать в dom
за cropper-hide
и посмотрите размеры изображения, и вы поймете, что я имею в виду.
Я хочу установить минимальные размеры для обрезанных изображений, чтобы обрезанное изображение было как минимум 300x300
,
Поэтому я установил размеры cropBox на 300x300
:
minCropBoxWidth: 300,
minCropBoxHeight: 300,
cropBoxResizable: true,
.cropper-crop-box,
.cropper-view-box{
min-height: 300px !important;
min-width: 300px !important
}
Но когда я выбираю изображение с размерами более 300x300
Размеры они уменьшаются до меньших размеров, так что cropBox превышает размеры изображения.
Я попытался установить минимальную ширину и высоту:
.cropper-container,
.cropper-canvas,
.cropper-container img{
min-width: 300px !important;
min-height: 300px !important;
}
Но затем изображение становится размытым, так как размеры "300x300" больше по высоте, чем новые размеры 436x128.963
в таком случае.
Я знаю, что если экран меньше, чем изображение, это будет проблемой, но в этом случае мой размер экрана больше, чем 1200x600
,
К изображению добавлен встроенный стиль для ширины и высоты.
Я хочу, чтобы пользователь загрузил изображение и обрезал его, а затем сохранил на сервере. Минимальная высота и ширина обрезанных изображений, которые будут отправлены на сервер, должна быть не менее 300x300
и до 600x600
Поскольку эти изображения будут использоваться в the testimonials
раздел.
Как решить эту проблему?