最近在项目上要实现这个功能，于是想简单的整理下。经查阅资料，有2种方式可以实现用户图像上传处理。第一种，前台预设有限制的裁剪框让用户在合法范围内裁剪好图像，裁剪后的图像转成base64串异步上传到后台。第二种，根据用户前台选取的图片，前台选取图片的一边角（习惯左上角）基点，需要裁剪的大小（width和height），把这三个数据上传到后台，后台依据这些数据裁剪后返回前台一个新的路径值，前台获取即可。
本次总结的是用cropper.js插件来实现，该剪裁插件支持图片放大缩小，支持鼠标滚轮操作，支持图片旋转，支持触摸屏设备（非常nice），支持canvas，并且支持跨浏览器使用（Chrome 38+、Firefox 33+、Internet Explorer 8+、Opera 25+、Safari 5.1+）。
先附上已经实现此功能的例子照片：
1.点击图像，触发上传
2.在裁剪框中选取合适的图像，点击确定即可裁剪；
3.确定后，裁剪的图片转成base64串后异步上传到后台，图片裁剪完成。
主要代码
主要引入文件：
<link rel="stylesheet" href="public/home/css/cropper.css">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="public/home/js/exif.js"></script>
<script src="public/home/js/cropper.js"></script>
<script src="public/home/js/myCrop.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="public/home/js/exif.js"></script>
<script src="public/home/js/cropper.js"></script>
<script src="public/home/js/myCrop.js"></script>
HTML代码：
<div class="user_info">
<div class="user_img" id="photoBtn" onclick="document.getElementById('inputImage').click()" >
<input id="inputImage" type="file" accept="image/*" style="display: none;"/>
<img id="showImg" />
<i class="user_ry"><img src="public/home/images/m3.png" alt="会员等级"></i>
</div>
<h5>张三</h5>
</div><!--头像裁剪预览开始 -->
<div class="user_container" id="containerDiv">
<div class="row" style="display: none;" id="imgEdit">
<div class="img-container">
<img src="" alt="Picture">
</div>
</div>
<div class="row" id="actions">
<div class="docs-buttons">
<button type="button" class="btn btn-primary" id="imgCannel" data-method="destroy" title="Destroy" style="height: auto;">
<span class="docs-tooltip" data-toggle="tooltip" >
<span class="fa fa-power-off" >取消</span>
</span>
</button>
<button type="submit" class="btn btn-primary" id="imgCutConfirm" data-method="getCroppedCanvas" data-option="{ "width": 100, "height": 100 }" style="height: auto;margin-right: 17px;" onclick="submitForm()">
<span class="docs-tooltip" data-toggle="tooltip" title="">确认</span>
</button>
</div>
</div>
</div>
<!-- 头像裁剪预览end -->
<div class="user_img" id="photoBtn" onclick="document.getElementById('inputImage').click()" >
<input id="inputImage" type="file" accept="image/*" style="display: none;"/>
<img id="showImg" />
<i class="user_ry"><img src="public/home/images/m3.png" alt="会员等级"></i>
</div>
<h5>张三</h5>
</div><!--头像裁剪预览开始 -->
<div class="user_container" id="containerDiv">
<div class="row" style="display: none;" id="imgEdit">
<div class="img-container">
<img src="" alt="Picture">
</div>
</div>
<div class="row" id="actions">
<div class="docs-buttons">
<button type="button" class="btn btn-primary" id="imgCannel" data-method="destroy" title="Destroy" style="height: auto;">
<span class="docs-tooltip" data-toggle="tooltip" >
<span class="fa fa-power-off" >取消</span>
</span>
</button>
<button type="submit" class="btn btn-primary" id="imgCutConfirm" data-method="getCroppedCanvas" data-option="{ "width": 100, "height": 100 }" style="height: auto;margin-right: 17px;" onclick="submitForm()">
<span class="docs-tooltip" data-toggle="tooltip" title="">确认</span>
</button>
</div>
</div>
</div>
<!-- 头像裁剪预览end -->
JS参数设置：
var options = {
minContainerHeight : screenHeight,
minContainerWidth : screenWidth,
aspectRatio: 1 / 1,//裁剪框比例 1：1
viewMode : 1,//显示
guides :false,//裁剪框虚线 默认true有
dragMode : "move",
build: function (e) { //加载开始
//可以放你的过渡 效果
},
built: function (e) { //加载完成
("#containerDiv").show();("#imgEdit").show();
},
zoom: function (e) {
console.log(e.type, e.detail.ratio);
},
background : false,// 容器是否显示网格背景
movable : false,//是否能移动图片
cropBoxMovable :true,//是否允许拖动裁剪框
cropBoxResizable :true,//是否允许拖动 改变裁剪框大小
};
minContainerHeight : screenHeight,
minContainerWidth : screenWidth,
aspectRatio: 1 / 1,//裁剪框比例 1：1
viewMode : 1,//显示
guides :false,//裁剪框虚线 默认true有
dragMode : "move",
build: function (e) { //加载开始
//可以放你的过渡 效果
},
built: function (e) { //加载完成
("#containerDiv").show();("#imgEdit").show();
},
zoom: function (e) {
console.log(e.type, e.detail.ratio);
},
background : false,// 容器是否显示网格背景
movable : false,//是否能移动图片
cropBoxMovable :true,//是否允许拖动裁剪框
cropBoxResizable :true,//是否允许拖动 改变裁剪框大小
};
原生态代码打包下载：点击白山羊案例下载
