无法缩放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

试着设置最大变焦

参考文献

​

$(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>

​