PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例
程序员文章站
2022-04-10 20:34:10
PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度。 ......
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 }
本实例源码下载:
上一篇: electron——初探