无法在 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>

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

Cannot zoom small image in cropit.js

javascript

jquery

html

css

cropit