一、功能體驗

先看demo：使用canvas在前端壓縮圖片并上傳demo

如下截圖：

點擊文件選擇框，我們不妨選一張尺寸比較大的圖片，例如下面這種2M多的釣魚收獲照：

于是圖片歘歘歘地傳上去了：

此時我們點擊最終上傳完畢的圖片地址，會發(fā)現(xiàn)原來2M多3000多像素寬的圖片被限制為400像素寬了：

保存到本地會發(fā)現(xiàn)圖片尺寸已經變成只有70K了：

以上就是圖片前端壓縮并上傳demo的完整演示。

二、實現(xiàn)原理

要想使用JS實現(xiàn)圖片的壓縮效果，原理其實很簡單，核心API就是使用canvas的drawImage()方法。

Canvas本質上就是一張位圖，而drawImage()方法可以把一張大大的圖片繪制在小小的Canvas畫布上，不久等同于圖片尺寸壓縮了？

對于本案例的壓縮，使用的5個參數(shù)的API方法：

context.drawImage(img, dx, dy, dWidth, dHeight);

復制代碼各參數(shù)具體含義可以參見“Canvas API中文文檔-drawImage”，這里不展開。

舉例：一張圖片（假設圖片對象是img）的原始尺寸是4000*3000，現(xiàn)在需要把尺寸限制為400*300大小，很簡單，原理如下代碼示意：

復制代碼

var canvas = document.createElement('canvas');

var context = canvas.getContext('2d');

canvas.width = 400;
canvas.height = 300;

// 核心JS就這個

context.drawImage(img,0,0,400,300);

把大圖片畫在一張小畫布上，壓縮就這么實現(xiàn)了，是不是簡單的有點超乎想象。

三、如果想要上傳或下載？

如果想要上傳圖片或者下載圖片，可以使用canvas.toDataURL()或者canvas.toBlob()方法先進行轉換。

1. canvas.toDataURL()語法如下：
canvas.toDataURL(mimeType, qualityArgument)復制代碼

可以把畫布轉換成base64格式信息圖像信息，純字符的圖片表示法。
其中：
mimeType表示canvas導出來的base64圖片的類型，默認是png格式，也即是默認值
是'image/png'，我們也可以指定為jpg格式'image/jpeg'或者webp等格式。file對象中的
file.type就是文件的mimeType類型，在轉換時候正好可以直接拿來用（如果有file對象）。
qualityArgument表示導出的圖片質量，只要導出為jpg和webp格式的時候此參數(shù)才有效果，默
認值是0.92，是一個比較合理的圖片質量輸出參數(shù)，通常情況下，我們無需再設定。

更多關于toDataURL()方法的信息可以參見“Canvas API中文文檔-toDataURL()”。

2. canvas.toBlob()方法

語法如下：
canvas.toBlob(callback, mimeType, qualityArgument)復制代碼

可以把畫布轉換成Blob文件，通常用在文件上傳中，因為是二進制的，對后端更加友好。
和toDataURL()方法相比，toBlob()方法是異步的，因此多了個callback參數(shù)，這個callback
回調方法默認的第一個參數(shù)就是轉換好的blob文件信息，本文一開始的demo案例中的文件上傳就
是將canvas圖片轉換成二進制的blob文件，然后再ajax上傳的，代碼如下：

// canvas轉為blob并上傳

canvas.toBlob(function (blob) {
 
// 圖片ajax上傳
 
var xhr = new XMLHttpRequest();
 
// 開始上傳
 
xhr.open("POST", 'upload.php', true);
 
xhr.send(blob);   

});

復制代碼

更多關于toBlob()方法的信息可以參見“Canvas API中文文檔-toBlob()”。
一旦有了可傳輸?shù)膱D像數(shù)據(jù)，上傳下載就好實現(xiàn)了。例如下載前端壓縮好的圖片，可以參考我上一
篇在掘金發(fā)布的文章：“純JS生成并下載各種文本文件或圖片”。

四、總結

經過“圖片→canvas壓縮→圖片”三步曲，我們完成了圖片前端壓縮功能。

責任編輯：中山網站建設
 【網訊網絡】國家高新技術企業(yè)》十一年專注軟件開發(fā)，網站建設，網頁設計，APP開發(fā)，小程序，微信公眾號開發(fā)，定制各類企業(yè)管理軟件（OA、CRM、ERP、OMS訂單管理系統(tǒng)、WMS進銷存管理軟件等)！服務熱線：0760-88610046、13924923903，http://www.denorpool.com