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