圖片純前端JS壓縮的實現

本文刪簡自：www.zhangxinxu.com/wordpress/?…

1、功能體驗

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

以下截圖：

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

因而圖片歘歘歘地傳上去了：

此時咱們點擊最終上傳完畢的圖片地址，會發現原來2M多3000多像素寬的圖片被限制爲400像素寬了：

保存到本地會發現圖片尺寸已經變成只有70K了：

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

2、實現原理

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

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

對於本案例的壓縮，使用的5個參數的API方法：

context.drawImage(img, dx, dy, dWidth, dHeight);複製代碼

各參數具體含義能夠參見「Canvas API中文文檔-drawImage」，這裏不展開。

舉例：
一張圖片（假設圖片對象是img）的原始尺寸是4000*3000，如今須要把尺寸限制爲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);複製代碼

把大圖片畫在一張小畫布上，壓縮就這麼實現了，是否是簡單的有點超乎想象。

3、若是想要上傳或下載？

若是想要上傳圖片或者下載圖片，可使用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格式的時候此參數纔有效果，默認值是0.92，是一個比較合理的圖片質量輸出參數，一般狀況下，咱們無需再設定。

更多關於toDataURL()方法的信息能夠參見「Canvas API中文文檔-toDataURL()」。

2. canvas.toBlob()方法

語法以下：

canvas.toBlob(callback, mimeType, qualityArgument)複製代碼

能夠把畫布轉換成Blob文件，一般用在文件上傳中，由於是二進制的，對後端更加友好。

和toDataURL()方法相比，toBlob()方法是異步的，所以多了個callback參數，這個callback回調方法默認的第一個參數就是轉換好的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()」。

一旦有了可傳輸的圖像數據，上傳下載就好實現了。例以下載前端壓縮好的圖片，能夠參考我上一篇在掘金髮布的文章：「純JS生成並下載各類文本文件或圖片」。

4、總結

通過「圖片→canvas壓縮→圖片」三步曲，咱們完成了圖片前端壓縮功能。

以上，感謝閱讀！