Установка минимальных и максимальных размеров для изображений с помощью кроппера

Я использую обрезку для обрезки изображений в круглую форму. По умолчанию размер выбранного изображения изменяется до меньших размеров, например, если исходные размеры изображения 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 раздел.

Как решить эту проблему?

0 ответов

Другие вопросы по тегам