利用localResizeIMG將圖片壓縮轉為base64上傳
阿新 • • 發佈：2018-12-03
在進行圖片上傳的時候，因為有些圖片太大，為了減輕伺服器的壓力，我們需要將圖片進行壓縮上傳。今天總結一下利用localResizeIMG如何將圖片壓縮轉為base64上傳，其中localResizeIMG外掛已上傳csdn。
程式碼如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>證件上傳</title> <link rel="stylesheet" type="text/css" href="http://static.wanlianjin.com/data/m/wlcs/css/abb/common.css" /> <script src="http://static.wanlianjin.com/data/m/wlcs/js/nocar/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://static.wanlianjin.com/data/m/wlcs/js/nocar/rem.js" type="text/javascript" charset="utf-8"></script> <script src="http://static.wanlianjin.com/data/m/wlcs/js/car/fnBase.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="js/binaryajax.js" ></script> <script type="text/javascript" src="js/exif.js" ></script> <script type="text/javascript" src='js/LocalResizeIMG1.js'></script> <script src='http://static.wanlianjin.com/data/m/wlcs/js/car/mobileBUGFix.mini.js' type="text/javascript" charset="utf-8" ></script> <style> * { box-sizing: border-box; } body, html { height: 100%; } .content li{ width:6.04rem; height:3.22rem; margin:0.18rem auto 0; position:relative; } .content li .tishi{ width:6.04rem; height:3.22rem; position:absolute; top:0; left:0; display:none; } .active{ display:block !important; z-index:9999; } .content li img{ position:absolute; width:100%; height:100%; top:0; } .content li input{ width:1.2rem; height:1.3rem; position:absolute; top:0.74rem; left:2.47rem; opacity:0; } </style> </head> <body> <ul class="content"> <li id="DP"> <div class="tishi tishi1" onclick="upload('.DP','#_dp','.tishi1','x','xszj')"></div> <img id="_dp" src="../image/paper/upload1.png"/> <input class="DP" data-role="none" type="file" accept="image/*"/> </li> <li id="DL"> <div class="tishi tishi2" onclick="upload('.DL','#_dl','.tishi2','j','jszj')"></div> <img id="_dl" src="../image/paper/upload2.jpg"/> <input class="DL" data-role="none" type="file" accept="image/*"/> </li> <li id="ID"> <div class="tishi tishi3" onclick="upload('.ID','#_id','.tishi3','s','sfzj')"></div> <img id="_id" src="../image/paper/upload3.png"/> <input class="ID" data-role="none" type="file" accept="image/*"/> </li> </ul> </body> <script type="text/javascript"> var n = 0; sessionStorage.xszj=''; sessionStorage.jszj=''; sessionStorage.sfzj=''; sessionStorage.setItem("imgpath",""); sessionStorage.b64data=""; //安卓呼叫本方法，獲取引數,進行回顯 function showPic(str){ var strType = str.slice(0,1); var strSrc = str.slice(1); if(strType == 'x') { $('#_dp').attr('src',strSrc); $('.tishi1').addClass('active'); }else if(strType == 'j'){ $('#_dl').attr('src',strSrc); $('.tishi2').addClass('active'); }else{ $('#_id').attr('src',strSrc); $('.tishi3').addClass('active'); } } //ios頁面回顯 compress('.DP',0.8,'#_dp','.tishi1'); compress('.DL',0.8,'#_dl','.tishi2'); compress('.ID',0.5,'#_id','.tishi3'); function upload(inputCla,imgId,ts,type,card){ n+=1; var baseStr = $(imgId).attr('src').split(',')[1]; console.log(baseStr) var name = 'avator'+n+'.jpg'; doUploadByBase64(name,baseStr,ts,type,card); } //compress壓縮轉換成base64位上傳 //引數解釋:inputCla:上傳input的class;qua:壓縮圖片的質量（取值為0-1）越大越好;imgId:回顯圖片的id function compress(inputCla,qua,imgId,ts){ $(inputCla).localResizeIMG({ //width:400 寬度 quality: qua, success: function (result) { var img = new Image(); img.src = result.base64; /** result.base64:帶圖片型別的base64編碼，可直接用於img標籤的src，如“data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY”; result.clearBase64:不帶圖片型別的編碼，如“/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY” */ $(imgId).attr('src' , img.src); $(ts).addClass('active'); } }) } //上傳base64位的圖片 function doUploadByBase64(name,baseStr,ts,type,card) { fnBase.loadShow() $('.loading').css('z-index','99999') sessionStorage.b64data=baseStr; var obj = new Object(); obj.name = name; obj.base64 =baseStr; sessionStorage.setItem(card,baseStr); obj.type = type; console.log(obj) $.ajax({ url:'/upload', type:'POST', contentType:"application/json", data:JSON.stringify(obj), success:function(result){ //如果返回{code:0}，則跳轉頁面 if(result.code=='0'){ fnBase.loadHide() $(ts).removeClass('active'); window.location.href="addDP.html"; //window.location.href="route?des="+result.des; sessionStorage.setItem("data",result.data); sessionStorage.setItem("dlimgpath",result.imgpath); }else{ fnBase.myalert(result.errinfo); } } }); } </script> </html>