一、引用资源

<link href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

二、添加容器

<!-- Wrap the image or canvas element with a block element (container) -->
<div><img id="image" src="picture.jpg"></div>

三、初始化

var cropOption = {
	aspectRatio: 1,
  	viewMode: 1,
  	autoCropArea: 0.9,
  	zoomOnWheel: false,
  	movable: false,
  	rotatable: false,
  	scalable : false,
  	zoomable : false,
  	ready: function () {
    	croppable = true;
  	},
  	crop : function () {
  		croppedCanvas = cropper.getCroppedCanvas();
  	 	$("#bigImg").attr('src', croppedCanvas.toDataURL("image/jpeg", 0.7));
  	 	$("#smallImg").attr('src', croppedCanvas.toDataURL("image/jpeg", 0.7));
  }
};

var image = document.getElementById('image');
cropper = new Cropper(image, cropOption);