最近在开拓过程中须要用到图片剪裁上传的功能，一开始是想着用canvas来实现，但对付canvas还不是很熟习，于是走了个捷径，找了一款开源的jQuery插件。还是挺大略好用的，适配IOS、Android和PC端各种浏览器，当然，除了IE9以下的版本（反正我不知道IE有什么存在的必要）。要想适配IE9以下的版本，就必须要用到flash插件了。
我们先看一下JQuery这个插件怎么用：
//以下是须要用到的js文件
<script type=\"大众text/javascript\公众 src=\"大众js/photo/jquery-2.1.3.min.js\"大众></script>
<script src=\公众js/photo/iscroll-zoom.js\公众></script>
<script src=\"大众js/photo/hammer.js\"大众></script>
<script src=\"大众js/photo/lrz.all.bundle.js\"大众></script>
<script src=\公众js/photo/jquery.photoClip.js\"大众></script>
接下来我们看一下html文件怎么写：
<!--截取前预览区域-->
<div id=\"大众clickArea\公众 style=\公众height: 400px;margin-top: 0px;\"大众>
</div>
<!--截取按钮-->
<div id=\"大众clickBtnArea\"大众 style=\"大众text-align: center;margin-top: 10px;
margin-bottom: 20px;width: 100%;\"大众>
<h5 style=\"大众color: #A0732F;\公众>
双指按住图片进行缩放或旋转
</h5>
<div align=\"大众center\"大众>
<h4>
<button onclick=\"大众reload();\公众>
重新选择
</button>
</h4>
<div>
<h4>
<button id=\公众clickBtn\公众>
截取
</button>
</h4>
</div>
</div>
//这个是自定义的样式，用图片代替掉input的默认选择框
<div align=\"大众center\"大众 id=\"大众view\"大众>
<img id=\"大众upload_img\公众 src=\"大众img/upload.jpg\"大众/>
<input id=\公众file\"大众 type=\"大众file\"大众 class=\"大众inputstyle\"大众 accept=\公众image/\公众 />
</div>
这里是input框的CSS：
.inputstyle {
width: 200px;
height: 200px;
position: relative;/相对定位或者绝对定位都行，只要定位到img上/
top: -90%;
cursor: pointer;
outline: medium none;
/隐蔽掉input那丑陋的选择框/
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
重点来了！
初始化JQ插件时的配置方法：
//clickArea是预览区域div的id
var clipArea = new bjj.PhotoClip(\公众#clickArea\公众, {
//剪裁区域的尺寸
size: [250, 250],
//输出图片的尺寸
outputSize: [400, 400],
//输出图片的格式
outputType: \"大众png\"大众,
//对应input框的id
file: \"大众#file\"大众,
//对应div的id
view: \公众#view\"大众,
//截取按钮
ok: \公众#clickBtn\公众,
loadStart: function() {
console.log(\公众照片读取中\公众);
},
loadComplete: function() {
console.log(\"大众照片读取完成\公众);
},
loadError: function(event) {
console.log(event);
},
clipFinish: function(dataURL) {
console.log(dataURL);
}
});
配置完成，打开浏览器看效果：
把稳！
所截取图片完成后，返回的是base64位的数据。
