使用js在layui中實現(xiàn)上傳圖片壓縮
一、關(guān)于js上傳圖片壓縮的方法,百度有很多種方法,這里我參考修改了一下
function photoCompress(file, w, objDiv) { var ready = new FileReader(); /*開始讀取指定的Blob對象或File對象中的內(nèi)容. 當(dāng)讀取操作完成時,readyState屬性的值會成為DONE,如果設(shè)置了onloadend事件處理程序,則調(diào)用之.同時,result屬性中將包含一個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é)點 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方法進行壓縮,最后生成一個Blob對象。
注:因為牽扯到canvas,所以低版本瀏覽器應(yīng)該是不支持的吧(有待考證)
二、圖片壓縮的方法有了,怎么使用呢?怎么上傳到后臺呢?往下看!
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方法對上傳的圖片進行壓縮,photoCompress方法的第二個參數(shù)還可以傳入長寬等參數(shù),具體可以看photoCompress這個方法,quality是用來設(shè)置壓縮后圖片質(zhì)量的,越小質(zhì)量越差,表現(xiàn)出來就是圖片越模糊,但是相應(yīng)的體積就越小。
最后使用formData.set(key,value,name)方法,將現(xiàn)有的name為file的表單元素的值改變。這個方法有三個參數(shù),第一個是key值,也就是表單里對應(yīng)的元素的name值(如果不存在會自行添加),第二個值是value值,第三個是選填的值,如果第二個值為blob對象或者file對象,則第三個值表示文件名。
當(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沒有了action,上傳的按鈕type改為了button
js部分給按鈕添加一個點擊事件,其他也沒有變化,不做過多贅述:
$("#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">
就是這么簡單。為什么要再寫一個隱藏的按鈕,之后解釋。
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) { //這里把后臺返回的數(shù)據(jù)進行操作,展示上傳完成的圖片,具體數(shù)據(jù)格式參考layui的API }, error: function() { } }); });
原理:在選擇照片之后,獲取文件,轉(zhuǎn)換為blob對象,使用resetFile方法對文件列隊里的文件進行重新設(shè)置,然后再觸發(fā)上傳事件。
踩的坑:
1、resetFile這個方法是layui 2.3.0 新增的,所以首先要確保layui的版本是最新的。
2、我把auto設(shè)置為false,點擊btnHide時觸發(fā)上傳,我也試過自動上傳,自動上傳的話,這些操作的代碼就要寫在before方法中(具體看layui的API),然而我發(fā)現(xiàn)自動上傳修改文件列隊的方法總是在上傳成功之后才調(diào)用,這就導(dǎo)致實際上傳的圖片其實沒有壓縮,至于為什么是這個執(zhí)行順序我隱約覺得是不是圖片轉(zhuǎn)碼,放入canvas的時候耽誤了……具體原因我不明白,所以我用手動上傳,確認(rèn)修改了文件列隊,再手動觸發(fā)上傳。
3、關(guān)于文件列隊,多次上傳文件,文件列隊也就是obj.pushFile()返回的是多個文件的對象,而且這些文件對象的key還是一串隨機數(shù)……所以我的思路是上傳一次,就用delete方法刪除隊列中已上傳過的文件。至于為什么不直接全部清空,因為考慮到不需要壓縮的情況,如果全部清空,不壓縮,就沒有執(zhí)行resetFile方法,文件列隊里就沒有文件,會報錯。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript中parseInt()函數(shù)的定義和用法分析
這篇文章主要介紹了javascript中parseInt()函數(shù)的定義和用法,較為詳細的分析了parseInt()函數(shù)的定義及具體用法,以及參數(shù)使用時的注意事項,需要的朋友可以參考下2014-12-12js實現(xiàn)卡片式項目管理界面UI設(shè)計效果
這篇文章主要介紹了js實現(xiàn)卡片式項目管理界面UI設(shè)計效果,該UI設(shè)計中,將各個項目以卡片的方式堆疊排列在屏幕上,當(dāng)點擊了其中的某個項目的時候,該項目圖片會全屏放大,向下滾動鼠標(biāo)可以看到該項目的介紹信息,需要的朋友可以參考下2015-12-12JS學(xué)習(xí)筆記之原型鏈和利用原型實現(xiàn)繼承詳解
這篇文章主要介紹了JS學(xué)習(xí)筆記之原型鏈和利用原型實現(xiàn)繼承,結(jié)合實例形式詳細分析了javascript原型鏈以及利用原型實現(xiàn)繼承的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-05-05javascript開發(fā)隨筆一 preventDefault的必要
給a做按鈕的click事件加preventDefault阻止瀏覽器的默認(rèn)行為貌似是印象中必須的事情2011-11-11