本文主要介紹了JS中圖片壓縮的方法，包括等比壓縮圖片的方法,需要的朋友可以參考下，希望能幫助到大家。

首先想一想我們有哪些需求？大多時(shí)候我們需要將一個(gè)File對象壓縮之后再變?yōu)镕ile對象傳入到遠(yuǎn)程圖片服務(wù)器；有時(shí)候我們也需要將一個(gè)base64字符串壓縮之后再變?yōu)閎ase64字符串傳入到遠(yuǎn)程數(shù)據(jù)庫；有時(shí)候后它還有可能是一塊canvas畫布，或者是一個(gè)Image對象，或者直接就是一個(gè)圖片的url地址，我們需要將它們壓縮上傳到遠(yuǎn)程；面對這么多的需求，王二索性畫了一張圖：

Alt text

二、解決辦法

如上圖所示，王二一共寫了七個(gè)方法，基本覆蓋了JS中大部分文件類型的轉(zhuǎn)換與壓縮，其中：

1、 urltoImage(url,fn) 會通過一個(gè)url加載所需要的圖片對象，其中 url 參數(shù)傳入圖片的 url , fn 為回調(diào)方法,包含一個(gè)Image對象的參數(shù)，代碼如下：

function?urltoImage?(url,fn){
??var?img?=?new?Image();
??img.src?=?url;
??img.onload?=?function(){
????fn(img);
??}
};

2、 imagetoCanvas(image) 會將一個(gè) Image 對象轉(zhuǎn)變?yōu)橐粋€(gè) Canvas 類型對象，其中 image 參數(shù)傳入一個(gè)Image對象，代碼如下：

function?imagetoCanvas(image){
??var?cvs?=?document.createElement("canvas");
??var?ctx?=?cvs.getContext('2d');
??cvs.width?=?image.width;
??cvs.height?=?image.height;
??ctx.drawImage(image,?0,?0,?cvs.width,?cvs.height);
??return?cvs?;
};

3、 canvasResizetoFile(canvas,quality,fn) 會將一個(gè) Canvas 對象壓縮轉(zhuǎn)變?yōu)橐粋€(gè) Blob 類型對象；其中 canvas 參數(shù)傳入一個(gè) Canvas 對象; quality 參數(shù)傳入一個(gè)0-1的 number 類型，表示圖片壓縮質(zhì)量; fn 為回調(diào)方法，包含一個(gè) Blob 對象的參數(shù);代碼如下：

function?canvasResizetoFile(canvas,quality,fn){
??canvas.toBlob(function(blob)?{
????fn(blob);
??},'image/jpeg',quality);
};

這里的 Blob 對象表示不可變的類似文件對象的原始數(shù)據(jù)。 Blob 表示不一定是 JavaScript 原生形式的數(shù)據(jù)。 File 接口基于 Blob ，繼承了 Blob 的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件。我們可以把它當(dāng)做File類型對待，其他更具體的用法可以參考MDN文檔

4、 canvasResizetoDataURL(canvas,quality) 會將一個(gè) Canvas 對象壓縮轉(zhuǎn)變?yōu)橐粋€(gè) dataURL 字符串,其中 canvas 參數(shù)傳入一個(gè) Canvas 對象; quality 參數(shù)傳入一個(gè)0-1的 number 類型，表示圖片壓縮質(zhì)量;代碼如下：

methods.canvasResizetoDataURL?=?function(canvas,quality){
??return?canvas.toDataURL('image/jpeg',quality);
};

其中的 toDataURL API可以參考MDN文檔

5、 filetoDataURL(file,fn) 會將 File （ Blob ）類型文件轉(zhuǎn)變?yōu)?dataURL 字符串,其中 file 參數(shù)傳入一個(gè) File （ Blob ）類型文件; fn 為回調(diào)方法，包含一個(gè) dataURL 字符串的參數(shù);代碼如下：

function?filetoDataURL(file,fn){
??var?reader?=?new?FileReader();
??reader.onloadend?=?function(e){
????fn(e.target.result);
??};
??reader.readAsDataURL(file);
};

6、 dataURLtoImage(dataurl,fn) 會將一串 dataURL 字符串轉(zhuǎn)變?yōu)?Image 類型文件,其中 dataurl 參數(shù)傳入一個(gè) dataURL 字符串, fn 為回調(diào)方法，包含一個(gè) Image 類型文件的參數(shù)，代碼如下：

function?dataURLtoImage(dataurl,fn){
??var?img?=?new?Image();
??img.onload?=?function()?{
????fn(img);
??};
??img.src?=?dataurl;
};

7、 dataURLtoFile(dataurl) 會將一串 dataURL 字符串轉(zhuǎn)變?yōu)?Blob 類型對象，其中 dataurl 參數(shù)傳入一個(gè) dataURL 字符串,代碼如下：

function?dataURLtoFile(dataurl)?{
??var?arr?=?dataurl.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});
};

三、進(jìn)一步封裝

對于常用的將一個(gè) File 對象壓縮之后再變?yōu)?File 對象,我們可以將上面的方法再封裝一下，參考如下代碼：

function?fileResizetoFile(file,quality,fn){
??filetoDataURL?(file,function(dataurl){
????dataURLtoImage(dataurl,function(image){
??????canvasResizetoFile(imagetoCanvas(image),quality,fn);
????})
??})
}

其中， file 參數(shù)傳入一個(gè) File （ Blob ）類型文件； quality 參數(shù)傳入一個(gè) 0-1 的 number 類型，表示圖片壓縮質(zhì)量； fn 為回調(diào)方法，包含一個(gè) Blob 類型文件的參數(shù)。

它使用起來就像下面這樣：

var?file?=?document.getElementById('demo').files[0];
fileResizetoFile(file,0.6,function(res){
??console.log(res);
??//拿到res，做出你要上傳的操作；
})

這樣的話，圖片壓縮上傳就能輕松地搞定了，以上的8個(gè)方法我已經(jīng)封裝好放到 github 上了，喜歡的話可以使勁的star哈。

參考文檔：

MDN

ps：下面看下JS等比壓縮圖片的辦法

function?proDownImage(path,imgObj)?{?//?等比壓縮圖片工具?
??//var?proMaxHeight?=?185;?
??var?proMaxHeight=300;?
??var?proMaxWidth?=?175;?
??var?size?=?new?Object();　?
??var?image?=?new?Image();　?
??image.src?=?path;　?
??image.attachEvent("onreadystatechange",?
??function()?{?//?當(dāng)加載狀態(tài)改變時(shí)執(zhí)行此方法,因?yàn)閕mg的加載有延遲?
????if?(image.readyState?==?"complete")?{?//?當(dāng)加載狀態(tài)為完全結(jié)束時(shí)進(jìn)入?
??????if?(image.width?>?0?&&?image.height?>?0)?{?
????????var?ww?=?proMaxWidth?/?image.width;?
????????var?hh?=?proMaxHeight?/?image.height;　?
????????var?rate?=?(ww?<?hh)???ww:?hh;?
????????if?(rate?<=?1)?{　?
??????????alert("imgage?width*rate?is:"?+?image.width?*?rate);?
??????????size.width?=?image.width?*?rate;?
??????????size.height?=?image.height?*?rate;?
????????}?else?{?
??????????alert("imgage?width?is:"?+?image.width);　　?
??????????size.width?=?image.width;　　?
??????????size.height?=?image.height;　　　?
????????}　?
??????}?
????}?
????imgObj.attr("width",size.width);?
????imgObj.attr("height",size.height);?
??});?
}

相關(guān)推薦：

如何實(shí)現(xiàn)JS中圖片壓縮方法

Canvas與圖片壓縮的示例代碼

HTML5實(shí)現(xiàn)圖片壓縮上傳功能的深度解析

以上是JS中圖片壓縮實(shí)現(xiàn)方法的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！