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图片上传裁剪参数配置说明：