Cropper JS exploration

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.0/cropper.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.0/cropper.min.js"></script>
<img id="image" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" />

CSS

html,body{
  margin:0;
  padding:0;
}

JavaScript

var image = document.getElementById('image');
var cropper = new Cropper(image, {
  crop: function(e) {
  	console.log('-------------');
		console.log(e.detail);
    console.log(this.cropper.getCropBoxData());
  },
  ready: function() {
  	var image=cropper.getCanvasData();
    
    setTimeout(function() {
      cropper.setCropBoxData({
      	left:Math.ceil(image.left+1),
        top:Math.ceil(image.top+1)
      });
    }, 1000)
  }
});