javascript - 无法在 cropit.js 中缩放小图像

Question

阅读文档后，我仍然没有找到如何在图像很小的情况下调整图像大小的解决方案。但它适用于大图像，但又不适用于小图像。请在下面查看我的代码:

$(document).ready(function(){

  $('#image-cropper').cropit({
    'minZoom': 2,
    'allowDragNDrop': false,
    'smallImage': 'allow'
  });

});

.cropit-preview{

  background-color: #f8f8f8;
  background-size: cover;
  border: 5px solid #ccc;
  border-radius: 3px;
  margin-top: 7px;
  width: 400px;
  height: 400px;
  display: inline-block;

}

<div id="image-cropper">
  <div class="cropit-preview"></div>
  
  <input type="range" class="cropit-image-zoom-input" />
  
  <input type="file" class="cropit-image-input" />
  <div class="select-image-btn">Select new image</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropit/0.5.1/jquery.cropit.min.js"></script>

示例图片

Answer 1

尝试设置最大缩放
reference

$(document).ready(function(){

  $('#image-cropper').cropit({
    'minZoom': 2,
    'allowDragNDrop': false,
    'smallImage': 'allow',
    'maxZoom' : 5
  });

  $(document).on('click','.zoomOut',function(){
  	changeZoom();
  });

  $(document).on('click','.zoomIn',function(){
  	changeZoom(true);
  });

  function changeZoom(increase){
  	var elm = $('#image-cropper');
  	var zoom = elm.cropit('zoom');
    zoom = increase ? zoom + 0.05 : zoom - 0.05;
    elm.cropit('zoom', zoom);
  }

});

.cropit-preview{

  background-color: #f8f8f8;
  background-size: cover;
  border: 5px solid #ccc;
  border-radius: 3px;
  margin-top: 7px;
  width: 400px;
  height: 400px;
  display: inline-block;

}

<div id="image-cropper">
  <div class="cropit-preview"></div>
  
  <button class="zoomOut">Zoom Out</button>
  <input type="range" class="cropit-image-zoom-input" />
  <button class="zoomIn">Zoom In</button>
  
  <input type="file" class="cropit-image-input" />
  
  <div class="select-image-btn">Select new image</div>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropit/0.5.1/jquery.cropit.min.js"></script>