cropper crop()

by dekkard

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/0.9.1/cropper.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/0.9.1/cropper.min.css">


<div class="col-md-9">
      <div class="img-container"><img alt="Picture" src="http://fengyuanchen.github.io/cropper/img/picture.jpg"></div>
    </div>

CSS

.img-container img {
    width: 800px;
    height: auto;
}

JavaScript

$(document).ready(function(){
var c = $('.img-container img').cropper({
      
      aspectRatio:1/1,
      strict:true,
      background:false,
      guides:false,
      autoCropArea:0.6,
      rotatable:false,
      //using these just to stop box collapsing on itself
      minCropBoxWidth:50,
      minCropBoxHeight:50,
      
      crop: function(data){
          //console.log("data = %o", data);
          //console.log("this = %o", $(this));
          
          //test the new height/width
          if(data.height < 100 || data.width < 100){
              //try to make it stop 
              //$(this).cropper('disable');
          }else{
              var json = [
                  '{"x":' + data.x,
                  '"y":' + data.y,
                  '"height":' + data.height,
                  '"width":' + data.width + '}'
              ].join();
              $('#image-data').val(json);
          }
      }
      
    }); // cropper

//console.log("C = %o", c);
    

    $('.img-container img').on('dragmove.cropper', function (e) {
        console.log('dragmove.cropper');
        
        var $cropper = $(e.target);
        
        // Call getData() or getImageData() or getCanvasData() or
        // whatever fits your needs
        var data = $cropper.cropper('getCropBoxData');
        
        console.log("data = %o", data);
        
        // Analyze the result
        if (data.height <= 150 || data.width <= 150) {
            console.log("Minimum size reached!");
            
            // Stop resize
            return false;
        }
        
        // Continue resize
        return true;
    }).on('dragstart.cropper', function (e) {
        console.log('dragstart.cropper');
        
        var $cropper = $(e.target);
        
        // Get the same data as above 
        var data = $cropper.cropper('getCropBoxData');
        
        // Modify the dimensions to quit from disabled mode
        if (data.height <= 150 || data.width <= 150) {
      ...