如何使用JavaScript進(jìn)行圖片等比壓縮？
在前端開發(fā)中，我們經(jīng)常需要將圖片等比壓縮后再上傳到服務(wù)器或者存儲(chǔ)到本地。這不僅能夠減少網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量，還能夠加快頁面加載速度。下面將介紹如何使用JavaScript進(jìn)行圖片等比壓縮。一、需求背景在實(shí)
在前端開發(fā)中，我們經(jīng)常需要將圖片等比壓縮后再上傳到服務(wù)器或者存儲(chǔ)到本地。這不僅能夠減少網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量，還能夠加快頁面加載速度。下面將介紹如何使用JavaScript進(jìn)行圖片等比壓縮。
一、需求背景
在實(shí)際開發(fā)中，我們常常需要將一個(gè)File對(duì)象或者base64字符串壓縮之后再變?yōu)镕ile對(duì)象或者base64字符串傳入到遠(yuǎn)程圖片服務(wù)器或數(shù)據(jù)庫中。有時(shí)候，圖片數(shù)據(jù)可能是一塊canvas畫布，或者是一個(gè)Image對(duì)象，或者直接就是一個(gè)圖片的URL地址，需要將它們壓縮上傳到遠(yuǎn)程服務(wù)器。面對(duì)這么多的需求，可以參考以下方法：
二、解決辦法
如上圖所示，我們可以通過以下七個(gè)方法來實(shí)現(xiàn)JS中大部分文件類型的轉(zhuǎn)換與壓縮：
1. urltoImage(url,fn)
該方法會(huì)通過一個(gè)URL加載所需的圖片對(duì)象，其中url參數(shù)傳入圖片的URL地址，fn為回調(diào)方法，包含一個(gè)Image對(duì)象的參數(shù)。代碼如下：
```javascript
function urltoImage(url, fn) {
var img new Image();
url;
function () {
fn fn(img);
};
}
```
2. imagetoCanvas(image)
該方法會(huì)將一個(gè)Image對(duì)象轉(zhuǎn)變?yōu)橐粋€(gè)Canvas類型對(duì)象，其中image參數(shù)傳入一個(gè)Image對(duì)象。代碼如下：
```javascript
function imagetoCanvas(image) {
var canvas ("canvas");
canvas.width image.width;
canvas.height image.height;
("2d").drawImage(image, 0, 0);
return canvas;
}
```
3. canvasResizetoFile(canvas,quality,fn)
該方法會(huì)將一個(gè)Canvas對(duì)象壓縮轉(zhuǎn)變?yōu)橐粋€(gè)Blob類型對(duì)象，其中canvas參數(shù)傳入一個(gè)Canvas對(duì)象；quality參數(shù)傳入一個(gè)0-1的number類型，表示圖片壓縮質(zhì)量；fn為回調(diào)方法，包含一個(gè)Blob對(duì)象的參數(shù)。代碼如下：
```javascript
function canvasResizetoFile(canvas,quality,fn) {
(function (blob) {
fn fn(blob);
}, "image/jpeg", quality);
}
```
這里的Blob對(duì)象表示不可變的類似文件對(duì)象的原始數(shù)據(jù)。Blob表示不一定是JavaScript原生形式的數(shù)據(jù)。File接口基于Blob，繼承了Blob的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件?？梢詫⑵洚?dāng)做File類型對(duì)待，其他更具體的用法可以參考MDN文檔。
4. canvasResizetoDataURL(canvas,quality)
該方法會(huì)將一個(gè)Canvas對(duì)象壓縮轉(zhuǎn)變?yōu)橐粋€(gè)dataURL字符串，其中canvas參數(shù)傳入一個(gè)Canvas對(duì)象；quality參數(shù)傳入一個(gè)0-1的number類型，表示圖片壓縮質(zhì)量。代碼如下：
```javascript
function canvasResizetoDataURL(canvas,quality){
return ("image/jpeg",quality);
}
```
其中的toDataURL API可以參考MDN文檔。
5. filetoDataURL(file,fn)
該方法會(huì)將File（Blob）類型文件轉(zhuǎn)變?yōu)閐ataURL字符串，其中file參數(shù)傳入一個(gè)File（Blob）類型文件；fn為回調(diào)方法，包含一個(gè)dataURL字符串的參數(shù)。代碼如下：
```javascript
function filetoDataURL(file,fn){
var reader new FileReader();
function(e){
fn fn();
}
(file);
}
```
6. dataURLtoImage(dataurl,fn)
該方法會(huì)將一串dataURL字符串轉(zhuǎn)變?yōu)镮mage類型文件，其中dataurl參數(shù)傳入一個(gè)dataURL字符串，fn為回調(diào)方法，包含一個(gè)Image類型文件的參數(shù)。代碼如下：
```javascript
function dataURLtoImage(dataurl,fn){
var img new Image();
function(){
fn fn(img);
}
dataurl;
}
```
7. dataURLtoFile(dataurl)
該方法會(huì)將一串dataURL字符串轉(zhuǎn)變?yōu)锽lob類型對(duì)象，其中dataurl參數(shù)傳入一個(gè)dataURL字符串。代碼如下：
```javascript
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] (n);
}
return new Blob([u8arr],{type:mime});
}
```
三、進(jìn)一步封裝
對(duì)于常用的將一個(gè)File對(duì)象壓縮之后再變?yōu)镕ile對(duì)象，可以將上面的方法再封裝一下，參考如下代碼：
```javascript
function compress(file,quality,fn){
var reader new FileReader(),
img new Image();
(file);
function(){
;
}
function(){
var canvas imagetoCanvas(this),
dataURL canvasResizetoDataURL(canvas,quality);
blob dataURLtoFile(dataURL);
fn fn(blob);
}
}
```
其中，file參數(shù)傳入一個(gè)File（Blob）類型文件；quality參數(shù)傳入一個(gè)0-1的number類型，表示圖片壓縮質(zhì)量；fn為回調(diào)方法，包含一個(gè)Blob類型文件的參數(shù)。它使用起來就像下面這樣：
```javascript
var file ('input').files[0];
compress(file,0.8,function(blob){
//...發(fā)送到服務(wù)器
})
```
四、總結(jié)
通過以上介紹，我們可以使用JavaScript對(duì)圖片進(jìn)行等比壓縮，并將其轉(zhuǎn)換成File對(duì)象或base64字符串傳遞給服務(wù)器或數(shù)據(jù)庫。這種方法可以有效地減少網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量，提高頁面加載速度，從而改善用戶體驗(yàn)。