标签：裁剪 cli 核心 target new url ons 读取 result
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
PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例
标签：裁剪 cli 核心 target new url ons 读取 result
原文地址：https://www.cnblogs.com/woleyia/p/10991749.html
