结合jQuery-photoClip手机端头像剪裁上传
- WBOYoriginal
- 2016-06-07 11:35:351488parcourir
不使用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('touchmove', 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('login/upload')}>", <br />
data:{str:dataURL}, <br />
type:'post', <br />
dataType:'json', <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元