jQuery+cropper.js裁剪图片

1.引入cropper.js插件的CSS和JS文件

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

 2.在HTML中添加一个图片元素和一个裁剪框元素

<img id="image" src="image.jpg">
<div id="cropper"></div>

3.初始化cropper对象

var cropper = new Cropper(document.getElementById('image'),
     {  
        aspectRatio: 16 / 9,  
        viewMode: 1, 
        crop: function(event) {
            console.log(event.detail.x);    
            console.log(event.detail.y);    
            console.log(event.detail.width);    
            console.log(event.detail.height);    
            console.log(event.detail.rotate);    
            console.log(event.detail.scaleX);    
            console.log(event.detail.scaleY);  
        }
    }
);

4.可选：设置cropper对象的属性

var cropper = new Cropper();
cropper.setData({ 
    x: 100,  
    y: 100,  
    width: 200,  
    height: 200,      
    rotate: 45,  
    scaleX: 1,  
    scaleY: 1
});

5.可选：获取裁剪后的图片数据

var cropper = new Crooper()
cropper.getCroppedCanvas().toDataURL();

6.可选：销毁cropper对象

var cropper = new Crooper()
cropper.destroy();

初始化cropper对象时，可以设置以下属性值：

aspectRatio: 裁剪框的宽高比ÿ