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

Posted 2021-12-30 woleyia

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("<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 

本实例源码下载：https://www.sucaihuo.com/php/684.html