Кроппер Fengyuanchen слишком сильно увеличивает масштаб изображения и теряет качество изображения

Question

Я начал с примера Crop Avatar для своего приложения с этой конфигурацией

this.$img.cropper({
          preview: this.$avatarPreview.selector,
          viewMode: 2,
          dragMode: 'move',
          guides: false,
          highlight: false,
          autoCropArea: 1,
          movable: true,
          strict: true,
          cropBoxResizable: false,
          minCropBoxWidth: 1000,
          minCropBoxHeight: 1000,
          zoom: function (e) {
            if (e.ratio > 1) {
              e.preventDefault();
              $(this).cropper('zoomTo', 1);
            }
          },

Используя это, я могу увеличить масштаб до 1, но для небольших изображений это слишком много. Например, изображение 1200x1200 можно увеличить с соотношением 1 к уровню, при сохранении которого до 1000x1000 оно теряет много качества. Я пытался пойти под 1 с $(this).cropper('zoomTo', 1); но это дает странный эффект. Если я увеличу масштаб, это приведет меня к исходному размеру.

У меня вопрос, как я могу заблокировать увеличение до чего-то вроде x0.2 или разумного значения. Спасибо

Answer 1

Этот ответ исходит от fengyuanchen, который разработал кроппер, и я думаю, что он соответствует моей потребности в разных разрешениях кропбокса на разных устройствах

$().cropper({
  zoom: function (e) {
    var container = $(this).cropper('getContainerData');

    // Desktop
    if (container.width > 1120) {

      // Zoom in
      if (e.ratio > e.oldRatio) {
        if (e.ratio > 10) {
          e.preventDefault();
        }

      // Zoom out
      } else {
        if (e.ratio < 0.1) {
          e.preventDefault();
        }
      }

    // Laptop
    } else if (container.width > 992) {
      // ...

    // Tablet
    } else if (container.width > 768) {
      // ...

    // Phone
    } else {
      // ...
    }
  }
});