豐源辰裁剪機縮放過多，圖像質量下降

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，但是對於較小的圖像來說，它太多了。 例如，可以將比例為1的1200x1200圖像縮放到將其保存為1000x1000的水平，這樣會損失很多畫質。 我試圖用$(this).cropper('zoomTo', 1); 但這會產生奇怪的效果。如果我放大很多，它會使我回到原始大小。

我的問題是如何阻止縮放到x0.2或合理的值。謝謝

Answer 1

這個答案來自馮元琛，他開發了裁剪機，我認為這符合我對不同設備上不同分辨率的裁剪機的需求

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