描述：jQuery photoClip是一款支持手势的裁图插件，在移动设备上双指捏合为缩放，双指旋转可根据旋转方向每次旋转90度,在PC设备上鼠标滚轮为缩放，每次双击则顺时针旋转90度。
- 难易初级
- 语言PHP
- 数据库其它
1、引用所需的JS文件
<script src="js/jquery.min.js"></script> <script src="js/iscroll-zoom.js"></script> <script src="js/hammer.js"></script> <script src="js/jquery.photoClip.js"></script>
2、获取图像base64并post提交至后端PHP文件进行处理
<script>
$(function() {
$("#clipArea").photoClip({
width: 200,
height: 200,
file: "#file",
view: "#view",
ok: "#clipBtn",
loadStart: function() {
console.log("照片读取中");
},
loadComplete: function() {
console.log("照片读取完成");
},
clipFinish: function(dataURL) {
$.post('upload.php',{"str":dataURL},function(res){
if(res.code=="1"){
alert(res.msg);
}else{
alert(res.msg);
}
},"json");
}
});
})
</script>3、后端upload.php处理接收到的base64图像数据并保存，PS：返回数据以JSON格式传输
$base64 = htmlspecialchars($_POST['str']);
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64, $result)) {
$type = $result[2];
$new_file = "./uploads/" . time() . ".{$type}";
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64)))) {
echo json_encode(array('code'=>1,'msg'=>'文件保存成功'));exit();
}
}
echo json_encode(array('code'=>0,'msg'=>'文件保存失败'));exit();4、jquery.photoClip.js图片上传裁剪参数配置说明：
| 参数 | 描述 | 默认值 |
| width | 截取区域的宽度 | 200 |
| height | 截取区域的高度 | 200 |
| file | 上传图片的<input type="text" /> | - |
| view | 显示截取后图像的容器的选择器或者DOM对象 | - |
| ok | 确认截图按钮的选择器或者DOM对象 | - |
| outputType | 指定输出图片的类型，可选 | jpg |
| strictSize | 是否严格按照截取区域宽高裁剪 | false |
| jquery.photoClip.js方法Method | - | |
| loadStart | 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入 loadStart: function() {} | - |
| loadComplete | 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入loadComplete: function() {} | - |
| loadError | 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入 | - |
| clipFinish | 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入 | - |
