使用js在layui中實現(xiàn)上傳圖片壓縮

這篇文章給大家介紹使用js在layui中實現(xiàn)上傳圖片壓縮，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)是專業(yè)的凌河網(wǎng)站建設(shè)公司，凌河接單;提供網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行凌河網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

一、關(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;
// 默認按比例壓縮
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.5; // 默認圖片質(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() {
}
});
});

關(guān)于使用js在layui中實現(xiàn)上傳圖片壓縮就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)站標題：使用js在layui中實現(xiàn)上傳圖片壓縮
URL標題：http://muchs.cn/article38/pdhdpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、用戶體驗、靜態(tài)網(wǎng)站、電子商務(wù)、響應(yīng)式網(wǎng)站、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名