欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-10 20:34:10
PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度。 ......

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

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

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

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("<img src='images/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 }

本实例源码下载: