Почему CropperJS неверно указывает минимальный размер обрезки?

Question

[Archakov Dennis]

Для обрезки аватарки, использую библиотеку - https://github.com/fengyuanchen/cropperjs

Размер изображения 1280х965. Вбил такие настройки:

this.Cropper = new Cropper(this.image, {
      guides: false,
      zoomable: false,
      viewMode: 2,
      aspectRatio: 40 / 54,
      minCropBoxWidth: 400,
      minCropBoxHeight: 540,
      responsive: true,
      crop: function(e) {
        console.clear();
        console.log(e.detail.width);
        console.log(e.detail.height);
      },
    });

Пытаюсь уменьшить область обрезки, но размер не уменьшается до 400х540, хотя размер - 1280х965

В консоли такие значения

Answer 1

[Михаил]

e.detail.width и e.detail.height показывают рельные размеры выделенной области на основе заданного aspectRatio. Что бы в итоге получить желаемый размер, нужно как минимум определится, где вы будете делать обрезу на сервере или на клиенте, если на сервере то как раз параметры из event'a в crop коллбеке вам пригодятся, если на клиенте, то надо сделать например так

cropper.getCroppedCanvas({
  width: 400,
  height: 540
}).toBlob(function (blob) {
  // тут выполнить upload на сервер
});;

Comments

[Archakov Dennis]

Понял. А почему я не могу уменьшить кропбокс?

[Михаил]

Archakov Dennis, потому, что вы задали минимальные размеры minCropBoxWidth и minCropBoxHeight, можно там например поставить 40 и 54 соответственно и кропбокс можно будет уменьшать до этих размеров, но если выполнить getCroppedCanvas c размерами 400 на 540 то маленькая выделенная область как раз растянится до этих размеров. Попробуйте на офф. сайте библиотеки поиграться с кропером, должно стать понятнее как это работает