干货!分享一个jQuery剪辑图片插件，适用于移动端和PC端
最近在开发过程中需要用到图片剪裁上传的功能，一开始是想着用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文件怎么写：
margin-bottom: 20px;width: 100%;">
双指按住图片进行缩放或旋转
重新选择
截取
//这个是自定义的样式，用图片代替掉input的默认选择框
这里是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位的数据。
