jquery 图片裁剪 java_PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例

PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例，在手机上双指捏合为缩放，双指旋转可根据旋转方向每次旋转90度，在电脑上鼠标滚轮为缩放，双击则顺时针旋转90度。

下面让我们来看看核心代码：

post的是base64，后端处理base64转存图片。

$("#clipArea").photoClip({

width: 200,

height: 200,

file: "#file",

view: "#view",

ok: "#clipBtn",

loadStart: function() {

$(".photo-clip-rotateLayer").html("");

console.log("照片读取中");

},

loadComplete: function() {

console.log("照片读取完成");

},

clipFinish: function(dataURL) {

$.ajax({

url: "upload.php",

data: {str: dataURL},

type: 'post',

dataType: 'html',

})

}

});

upload.php图片上传

$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 '新文件保存成功：', $new_file;

}

}

需要下载的朋友可以查看原文链接