结合jQuery-photoClip手机端头像剪裁上传

不使用thinkphp上传扩展，结合jQuery-photoClip手机端头像剪裁上传，支持手势缩放。
post的是base64，后端处理base64转存图片。
自己美化下就OK了
在论坛找了半天，没有合适的手机端传图js的插件,自己去网上找了下，看这个插件还不错，分享给大家。
高人请飘过，勿喷。
后台的转base64是借本站一个帖子里的，想不起来在哪了，跟作者说声不好意思！
前端HTML代码。<style><br /> body {<br /> margin: 0;<br /> text-align: center;<br /> }<br /> #clipArea {<br /> margin: 20px;<br /> height: 300px;<br /> }<br /> #file,<br /> #clipBtn {<br /> margin: 20px;<br /> }<br /> #view {<br /> margin: 0 auto;<br /> width: 200px;<br /> height: 200px;<br /> }<br /> </style> <br> <br> <br> <div></div> <br> <input><br> <button>截取</button><br> <div></div> <br> <br> <script></script><br> <script></script><br> <script></script><br> <script></script><br> <script><br /> //document.addEventListener(&#039;touchmove&#039;, function (e) { e.preventDefault(); }, false);<br /> $("#clipArea").photoClip({<br /> width: 200,<br /> height: 200,<br /> file: "#file",<br /> view: "#view",<br /> ok: "#clipBtn",<br /> loadStart: function() {<br /> console.log("照片读取中");<br /> },<br /> loadComplete: function() {<br /> console.log("照片读取完成");<br /> },<br /> clipFinish: function(dataURL) {<br /> <br /> $.ajax({ <br /> url:"<{:U(&#039;login/upload&#039;)}>", <br /> data:{str:dataURL}, <br /> type:&#039;post&#039;, <br /> dataType:&#039;json&#039;, <br /> <br /> })<br /> }<br /> });<br /> <br /> </script>后端控制器代码为    public function upload(){<br>         $base64 = I('post.str');<br>         if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64, $result)){<br>           $type = $result[2];<br>           $new_file = "./Uploads/".time().".{$type}";<br>           if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64)))){<br>             echo '新文件保存成功：', $new_file;<br>           }<br>          }<br>  }JS插件请到github下载https://github.com/baijunjie/jQuery-photoClip

AD：真正免费，域名+虚机+企业邮箱=0元