最近在开发过程中需要用到图片剪辑上传的功能。一开始我们想过用canvas来实现，但是对canvas不是很熟悉，所以走了捷径，找了一个开源的jQuery插件。它非常简单易用。它适应IOS、Android、PC上的各种浏览器，当然除了IE9以下的版本(反正我也不知道IE为什么存在)。如果要适配IE9以下的版本，必须使用flash插件。
我们先来看看如何使用JQuery作为插件：
//需要使用以下js文件
脚本类型=’ text/JavaScript ‘ src=’ js/photo/jquery-2 . 1 . 3 . min . js ‘/script
script src=’ js/photo/is scroll-zoom . js ‘/script
脚本src=’ js/photo/hammer . js ‘/script
脚本src=’ js/photo/lrz . all . bundle . js ‘/script
script src=’ js/photo/jquery . photo clip . js ‘/script
接下来，我们来看看如何编写html文件：
！-拦截前预览区域-
div id=’ click area ‘ style=’ height : 400 px；margin-top : 0px；’
/div
！拦截按钮
div id=’ clickBtnArea ‘ style=’ text-align : center；margin-top : 10px；
margin-bottom : 20px；宽度： 100%；’
h5 style=’ color: # A0732F’
用两个手指按住图片进行缩放或旋转。
/h5
div align=’center ‘
h4
button onclick=’ reload()；’
重新选
/按钮
/h4
差异
h4
按钮id=’clickBtn ‘
拦截
/按钮
/h4
/div
/div
//这是自定义样式。用图片替换输入的默认选择框。
div align=’center’ id=’view ‘
img id=’ upload _ img ‘ src=’ img/upload . jpg ‘/
input id=’ file ‘ type=’ file ‘ class=’ input style ‘ accept=’ image/* ‘/
/div
下面是输入框的CSS:输入样式{
宽度： 200 px；
height: 200px
位置：相对；/*相对定位或者绝对定位都可以，只要定位在img上*/
top :-90%；
cursor:指针；
outline:中无；
/*隐藏难看的输入选择框*/
filter: alpha(不透明度=0)；
-moz-opa 3 3360 0；
opa 3 3360 0；
}
重点来了！初始化JQ插件时的配置方法：
//clickArea是预览区域div的id。
var clipArea=new bjj。PhotoClip(‘#clickArea ‘，{
//剪辑区域的大小
尺寸： [250，250]，
//输出图片的大小
输出大小： [400，400]，
//输出图片的格式
输出类型： ‘png ‘，
//对应输入框的id
文件： ‘#file ‘，
//对应div的id
view: ‘#view ‘，
//截取按钮
ok: ‘#clickBtn ‘，
loadStart:函数(){
Console.log(‘照片阅读’)；
},
loadComplete:函数(){
Console.log(‘照片读取完成’)；
},
loadError:函数(事件){
console.log(事件)；
},
clipFinish:函数(dataURL) {
console . log(data URL)；
}
});
完成配置，打开浏览器查看效果：
立正！捕获图像完成后，返回的数据是base64位数据。
