最近在开发过程中需要用到图片剪裁上传的功能，一开始是想着用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位的数据。