PHP+jQuery.photoClip.js支持手勢的圖片裁剪上傳實例

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