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

下面让我们来看看核心代码:
post的是base64,后端处理base64转存图片。
1 $("#cliparea").photoclip({
2 width: 200,
3 height: 200,
4 file: "#file",
5 view: "#view",
6 ok: "#clipbtn",
7 loadstart: function() {
8 $(".photo-clip-rotatelayer").html("
");
9 console.log("照片读取中");
10 },
11 loadcomplete: function() {
12 console.log("照片读取完成");
13 },
14 clipfinish: function(dataurl) {
15 $.ajax({
16 url: "upload.php",
17 data: {str: dataurl},
18 type: 'post',
19 datatype: 'html',
20 })
21 }
22 });
upload.php图片上传
1 $base64 = htmlspecialchars($_post['str']);
2 if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64, $result)) {
3 $type = $result[2];
4 $new_file = "./uploads/" . time() . ".{$type}";
5 if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64)))) {
6 echo '新文件保存成功:', $new_file;
7 }
8 }
本实例源码下载:
希望与广大网友互动??
点此进行留言吧!