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

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

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

post的是base64，后端处理base64转存图片。

 $("#clipArea").photoClip({
     width: 200,
     height: 200,
     file: "#file",
     view: "#view",
     ok: "#clipBtn",
     loadStart: function() {
         $(".photo-clip-rotateLayer").html("<img src='images/loading.gif'/>");
         console.log("照片读取中");
     },
     loadComplete: function() {
         console.log("照片读取完成");
     },
     clipFinish: function(dataURL) {
         $.ajax({
             url: "upload.php",
             data: {str: dataURL},
             type: 'post',
             dataType: 'html',
         })
     }
 });

upload.php图片上传

 $base64 = htmlspecialchars($_POST['str']);
 if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64, $result)) {
     $type = $result[2];
     $new_file = "./uploads/" . time() . ".{$type}";
     if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64)))) {
         echo '新文件保存成功：', $new_file;
     }
 }

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