photoclip php,PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例

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

6486a1600a9fa15f401a19565d707e2b.png

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

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("loading.gif");

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 }

本实例源码下载:

希望与广大网友互动??

点此进行留言吧!