第一步:引入相应的js,这里提供裁剪工具的js,关于我里面引用的hui的前端js您可以去hui.admin的官网下载,资源链接:https://pan.baidu.com/s/1Pt47Fqn1UVjbUC5Z2W1ESw
第二步:页面搭建,友情提示,图片加载在裁剪框里面后,可以通过鼠标滚动来改变大小,这个裁剪插件只能挪动图片位置,不能改变裁剪框位置,而且,图片过小会被放大模糊,使用时可以建议用户找大图效果更佳
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title>添加银行卡</title>
<link rel="stylesheet" type="text/css" href="__STYLE__/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="__STYLE__/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="__STYLE__/css/style.css" />
<style type="text/css">
article #addform{ height: 400px; margin: 30px auto; }
.container{ width: 100%; }
.container img{ cursor: pointer; border: 3px solid #fff; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,.15); }
.modal-backdrop{ z-index: 0 !important; }
.ups1{ display: none; color: red; margin: -17px 0 0 150px; }
#clipArea1{ width: 466px; height: 310px; }
#file1,#clipBtn1{ margin: 15px 0px; }
#view1{ display: none; width: 456px; height: 300px;
</style>
</head>
<body style="width: 100%; min-width: 1024px; background-color: #f5f5f5;">
<!-- header start -->
<header>
<!-- 头部 -->
{include file="public/header"}
</header>
<!-- header end -->
<!-- article-title start -->
<div class="artice-title"><span class="btn btn-primary btn-title">添加银行卡</span></div>
<!-- article-title end -->
<!-- article start -->
<article>
<form method="post" class="form-horizontal" id="addform">
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">银行卡照片</label>
<div class="formControls col-xs-8 col-sm-9">
<!-- 隐藏域,用来存上传返回的图片路径 -->
<input type="hidden" name="b_file1" id="b_file1">
<div class="container" id="myModal1" title="点击上传" style="height:130px !important;">
<img src="__STYLE__/images/idcard4.jpg" class="b_file1" width="190px" alt="Avatar">
</div>
</div>
<div class="col-xs-8 col-sm-6 col-xs-offset-4 col-sm-offset-2"> </div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"> </label>
<div class="col-xs-8 col-sm-9">
<a class="btn btn-primary" id="button" style="width:100%;height:40px;">立即提交</a>
</div>
</div>
</form>
</article>
<div id="modal-demo1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content radius">
<div class="modal-header">
<h3 class="modal-title">上传银行卡正面照 <span class="ups1">正在读取...</span></h3>
<a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
</div>
<div class="modal-body">
<table width="100%">
<tr><td><input type="file" id="file1"></td></tr>
<tr><td><div id="clipArea1"></div></td></tr>
<tr><td><button class="btn btn-primary" id="clipBtn1">开始上传</button></td></tr>
<tr><td><div id="view1"></div></td></tr>
</table>
</div>
</div>
</div>
</div>
<div style="width:100%;height:50px;margin:0 auto"></div> <!-- 空盒模型 -->
<script src="__STYLE__/lib/jquery/1.9.1/jquery.min.js"></script>
<script src="__STYLE__/static/h-ui/js/H-ui.min.js"></script>
<!-- 图片裁剪工具 -->
<script src="__STYLE__/cropper/iscroll-zoom.js"></script>
<script src="__STYLE__/cropper/hammer.js"></script>
<script src="__STYLE__/cropper/jquery.photoClip.js"></script>
<!-- 底部 -->
{include file="public/footer"}
<script type="text/javascript">
$(function(){
//模态框
$("#myModal1").click(function(){
$("#modal-demo1").modal("show");
});
//证件照裁剪插件
$("#clipArea1").photoClip({
width: 456,
height: 300,
file: "#file1",
view: "#view1",
ok: "#clipBtn1",
outputType: 'png',
loadStart: function(){
$(".ups1").css("display","block");
//console.log("照片读取中");
},
loadComplete: function() {
$(".ups1").text("照片读取完成!");
//console.log("照片读取完成");
},
clipFinish: function(dataURL) {
//console.log(dataURL);
//剪裁完成后返回的base64.可以直接上传至服务器。
//计算文件大小
var strLen = dataURL.length;
var fileSize = strLen-(strLen/8)*2;
if(fileSize/1024 > 2048){
$(".ups1").text('请上传小于2M的图片!');
return false;
}else{
$(".ups1").text('正在上传……');
}
$.ajax({
type: "post",
data: {b_file: 1,img: dataURL},
url: "{:url('block/upImages')}",
dataType:'json',
success:function(data){
if(data.status == 1){
$(".ups1").text(data.info);
$("#b_file1").val(data.url);
$(".b_file1").attr('src','__PUBLIC__/upload/image/'+data.url);
//$("#modal-demo1").modal("hide");
}else{
alert(data.info);
return false;
}
},
error:function(request){
alert('系统错误!');
}
});
}
});
});
</script>
</body>
</html>
第三步:后台处理上传图片,这里的框架是tp5
public function upImages(){
$base64 = input('img'); //接收图片
$file = input('b_file'); //获取证件类别
if(preg_match('/^(data:\s*image\/(\w+);base64,)/',$base64,$result)){
$type = $result[2];
$new_file = "./upload/image/".time().".{$type}"; //图片重命名
$file_name = explode('./upload/image/',$new_file); //./upload/image/1532854284.jpeg ,上传后的图片以及保存路径
if(file_put_contents($new_file,base64_decode(str_replace($result[1],'',$base64))))
{
if($file == 1){
$arr = array(
'status' => 1,
'url' => $file_name[1],
'info' => '图片上传成功!'
);
}else{
unlink($new_file); //图片未写入时,删除该上传图片
$arr = array(
'status' => 0,
'info' => '图片上传失败,请重新上传!'
);
}
return json($arr);
}
else
{
$arr = array(
'status' => 0,
'info' => '图片上传失败!'
);
return json($arr);
}
}
}