Search code examples
javascriptjqueryhtmlcsscropit

Cannot zoom small image in cropit.js

After reading the documentation, I still didn't found the solution on how can I resize the image even if the image is small. But it is working on big images, but then again it is not working on small images. Please see my code below:

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

Sample Image

enter image description here

Solution

  • Try setting max zoom
    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>