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

湖中沉 · 发表于 2023-11-30 08:12:11

结合jQuery-photoClip手机端头像剪裁上传，支持手势缩放。
post的是base64，后端处理base64转存图片。
自己美化下就OK了
在论坛找了半天，没有合适的手机端传图js的插件,自己去网上找了下，看这个插件还不错，分享给大家。
高人请飘过，勿喷。
后台的转base64是借本站一个帖子里的，想不起来在哪了，跟作者说声不好意思！
前端HTML代码。

<style>
body {
margin: 0;
text-align: center;
}
#clipArea {
margin: 20px;
height: 300px;
}
#file,
#clipBtn {
margin: 20px;
}
#view {
margin: 0 auto;
width: 200px;
height: 200px;
}
</style>
</head>
<body ontouchstart="">
<div id="clipArea"></div>
<input type="file" id="file">
<button id="clipBtn">截取</button>
<div id="view"></div>
<script src="__PUBLIC__/jQuery-photoClip-master/js/jquery-2.1.3.min.js"></script>
<script src="__PUBLIC__/jQuery-photoClip-master/js/iscroll-zoom.js"></script>
<script src="__PUBLIC__/jQuery-photoClip-master/js/hammer.js"></script>
<script src="__PUBLIC__/jQuery-photoClip-master/js/jquery.photoClip.js"></script>
<script>
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
$("#clipArea").photoClip({
width: 200,
height: 200,
file: "#file",
view: "#view",
ok: "#clipBtn",
loadStart: function() {
console.log("照片读取中");
},
loadComplete: function() {
console.log("照片读取完成");
},
clipFinish: function(dataURL) {
$.ajax({
url:"<{:U('login/upload')}>",
data:{str:dataURL},
type:'post',
dataType:'json',
})
}
});
</script>

复制代码

后端控制器代码为

public function upload(){
$base64 = I('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;
}
}
}

复制代码

JS插件请到github下载https://github.com/baijunjie/jQuery-photoClip

账号		自动登录	找回密码
密码			注册加入