這篇文章給大家介紹使用js在layui中實(shí)現(xiàn)上傳圖片壓縮,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
創(chuàng)新互聯(lián)是專(zhuān)業(yè)的凌河網(wǎng)站建設(shè)公司,凌河接單;提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行凌河網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
一、關(guān)于js上傳圖片壓縮的方法,百度有很多種方法,這里我參考修改了一下
function photoCompress(file, w, objDiv) { var ready = new FileReader(); /*開(kāi)始讀取指定的Blob對(duì)象或File對(duì)象中的內(nèi)容. 當(dāng)讀取操作完成時(shí),readyState屬性的值會(huì)成為DONE,如果設(shè)置了onloadend事件處理程序,則調(diào)用之.同時(shí),result屬性中將包含一個(gè)data: URL格式的字符串以表示所讀取文件的內(nèi)容.*/ ready.readAsDataURL(file); ready.onload = function() { var re = this.result; canvasDataURL(re, w, objDiv); } }; function canvasDataURL(path, obj, callback) { var img = new Image(); img.src = path; img.onload = function() { var that = this; // 默認(rèn)按比例壓縮 var w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); var quality = 0.5; // 默認(rèn)圖片質(zhì)量為0.7 //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 創(chuàng)建屬性節(jié)點(diǎn) var anw = document.createAttribute("width"); anw.nodeValue = w; var anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 圖像質(zhì)量 if(obj.quality && obj.quality <= 1 && obj.quality > 0) { quality = obj.quality; } // quality值越小,所繪制出的圖像越模糊 var base64 = canvas.toDataURL('image/jpeg', quality); // 回調(diào)函數(shù)返回base64的值 callback(base64); } } function convertBase64UrlToBlob(urlData) { var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); }
以上是壓縮圖片的方法,核心是將圖片放入canvas內(nèi),再用canvas.toDataURL方法進(jìn)行壓縮,最后生成一個(gè)Blob對(duì)象。
注:因?yàn)闋砍兜絚anvas,所以低版本瀏覽器應(yīng)該是不支持的吧(有待考證)
二、圖片壓縮的方法有了,怎么使用呢?怎么上傳到后臺(tái)呢?往下看!
html部分:
<form action="file/uploadDoc" enctype="multipart/form-data" method="post" id="form"> <input type="file" id="file" name="file" /> <input type="submit" value="上傳" /> </form>
js部分:
$("#file").change(function() { var formData = new formData("form"); var file = this.files[0]; photoCompress(file, { quality: 0.5, }, function(base64Codes) { var bl = convertBase64UrlToBlob(base64Codes); formData.set("file", bl, file.name); }); });
當(dāng)選擇文件以后,使用photoCompress方法對(duì)上傳的圖片進(jìn)行壓縮,photoCompress方法的第二個(gè)參數(shù)還可以傳入長(zhǎng)寬等參數(shù),具體可以看photoCompress這個(gè)方法,quality是用來(lái)設(shè)置壓縮后圖片質(zhì)量的,越小質(zhì)量越差,表現(xiàn)出來(lái)就是圖片越模糊,但是相應(yīng)的體積就越小。
最后使用formData.set(key,value,name)方法,將現(xiàn)有的name為file的表單元素的值改變。這個(gè)方法有三個(gè)參數(shù),第一個(gè)是key值,也就是表單里對(duì)應(yīng)的元素的name值(如果不存在會(huì)自行添加),第二個(gè)值是value值,第三個(gè)是選填的值,如果第二個(gè)值為blob對(duì)象或者file對(duì)象,則第三個(gè)值表示文件名。
當(dāng)然,如果你不想用form表單提交,你也可以用ajax提交的方法:
html:
<form enctype="multipart/form-data" method="post" id="form"> <input type="file" id="file" name="file" /> <input type="button" value="上傳" id="uploadBtn"/> </form>
有些許的變化,form沒(méi)有了action,上傳的按鈕type改為了button
js部分給按鈕添加一個(gè)點(diǎn)擊事件,其他也沒(méi)有變化,不做過(guò)多贅述:
$("#uploadBtn").click(function () { var formData = new formData("form"); $.ajax({ type:"post", url:"", async:true, data:formData, success:function (data) { }, error:function (e) { } }); });
三、結(jié)合layui踩的一些坑,以及最終的解決方法。
先看html部分:
<button type="button" class="layui-btn" id="upImg">上傳圖片</button> <div id="img_list"> </div> <input type="button" id = "btnHide" class="none">
就是這么簡(jiǎn)單。為什么要再寫(xiě)一個(gè)隱藏的按鈕,之后解釋。
js部分:
layui.use('upload', function() { var upload = layui.upload; var uploadInst = upload.render({ elem: '#upImg', url: '/upload/', auto: false, bindAction: "#btnHide", choose: function(obj) { var files = obj.pushFile(); var index, file, indexArr = []; for(index in files) { indexArr.push(index); }; var iaLen = indexArr.length; file = files[indexArr[iaLen - 1]]; for(var i = 0; i < iaLen - 1; i++) { delete files[indexArr[i]]; } try { if(file.size > 200 * 1024) { delete files[index]; photoCompress(file, { quality: 0.5, }, function(base64Codes) { var bl = convertBase64UrlToBlob(base64Codes); obj.resetFile(index, bl, file.name); $("#btnHide").trigger("click"); }); } else { $("#btnHide").trigger("click"); } } catch(e) { $("#btnHide").trigger("click"); } }, done: function(res) { //這里把后臺(tái)返回的數(shù)據(jù)進(jìn)行操作,展示上傳完成的圖片,具體數(shù)據(jù)格式參考layui的API }, error: function() { } }); });
關(guān)于使用js在layui中實(shí)現(xiàn)上傳圖片壓縮就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
網(wǎng)站標(biāo)題:使用js在layui中實(shí)現(xiàn)上傳圖片壓縮
URL標(biāo)題:http://bm7419.com/article38/pdhdpp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、用戶體驗(yàn)、靜態(tài)網(wǎng)站、電子商務(wù)、響應(yīng)式網(wǎng)站、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)