Fengyuanchen кадрирование увеличивает масштаб слишком много, и потеря качества для изображений

Question

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

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 или разумного value.Thank вы

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 { 
     // ... 
    } 
    } 
});