图片裁剪并上传，电脑手机均实用
生活随笔
收集整理的這篇文章主要介紹了
图片裁剪并上传，电脑手机均实用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第一步：引入相應的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); }}}?
?
總結
以上是生活随笔為你收集整理的图片裁剪并上传，电脑手机均实用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电力监控名词概览
- 下一篇： vscode 中出现 Bad owner