JS 圖片簡易壓縮【實踐】

轉發鏈接：https://juejin.im/post/5ea574cc518825736e57fcca

前言

說起圖片壓縮，大家想到的或者平時用到的很多工具都可以實現，例如，客戶端類的有圖片壓縮工具 PPDuck3， JS 實現類的有插件 compression.js ，亦或是在線處理類的 OSS 上傳，文件上傳後，在訪問文件時中也有圖片的壓縮配置選項，不過，能不能自己擼一套 JS 實現的圖片壓縮代碼呢？當然可以，那我們先來理一下思路。

壓縮思路

涉及到 JS 的圖片壓縮，我的想法是需要用到 Canvas 的繪圖能力，通過調整圖片的分辨率或者繪圖質量來達到圖片壓縮的效果，實現思路如下：

• 獲取上傳 Input 中的圖片對象 File
• 將圖片轉換成 base64 格式
• base64 編碼的圖片通過 Canvas 轉換壓縮，這裡會用到的 Canvas 的 drawImage 以及 toDataURL 這兩個 Api，一個調節圖片的分辨率的，一個是調節圖片壓縮質量並且輸出的，後續會有詳細介紹
• 轉換後的圖片生成對應的新圖片，然後輸出

優缺點介紹

不過 Canvas 壓縮的方式也有著自己的優缺點：

• 優點：實現簡單，參數可以配置化，自定義圖片的尺寸，指定區域裁剪等等。
• 缺點：只有 jpeg 、webp 支持原圖尺寸下圖片質量的調整來達到壓縮圖片的效果，其他圖片格式，僅能通過調節尺寸來實現

代碼實現

<code><template>
  

    
    
    <button>兼容 IE 下載/<button>
    

       

    

  

/<template>

複製代碼/<code>

上面的代碼是可以直接拿來看效果的，不喜歡用 Vue 的也可以把代碼稍微調整一下，下面開始具體分解一下代碼的實現思路。

Input 上傳 File 處理

將 File 對象通過 FileReader 的 readAsDataURL 方法轉換為URL格式的字符串（base64編碼）。

<code>const fileObj = document.querySelector('#input-img').files[0];
let reader = new FileReader();
// 讀取文件
reader.readAsDataURL(fileObj);
複製代碼/<code>

Canvas 處理 File 對象

建立一個 Image 對象，一個 canvas 畫布，設定自己想要下載的圖片尺寸，調用 drawImage 方法在 canvas 中繪製上傳的圖片。

<code>let image = new Image(); //新建一個img標籤
image.src = e.target.result;
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
複製代碼/<code>

Api 解析：drawImage

<code>context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
複製代碼/<code> 

img

就是圖片對象，可以是頁面上獲取的 DOM 對象，也可以是虛擬 DOM 中的圖片對象。

dx , dy , dWidth , dHeight

表示在 canvas 畫布上規劃出一片區域用來放置圖片，dx, dy 為繪圖位置在 Canvas 元素的 X 軸、Y 軸座標，dWidth, dHeight 指在 Canvas 元素上繪製圖像的寬度和高度（如果不說明， 在繪製時圖片的寬度和高度不會縮放）。

sx , sy , swidth , sheight

這 4 個參數是用來裁剪源圖片的，表示圖片在 canvas 畫布上顯示的大小和位置。sx,sy 表示在原圖片上裁剪位置的 X 軸、Y 軸座標，然後以 swidth,sheight 尺寸來選擇一個區域範圍，裁剪出來的圖片作為最終在 Canvas 上顯示的圖片內容（ swidth,sheight 不說明的情況下，整個矩形（裁剪）從座標的 sx 和 sy 開始，到圖片的右下角結束）。

以下為圖片繪製的實例：

<code>context.drawImage(image, 0, 0, 100, 100);
context.drawImage(image, 300, 300, 200, 200);
context.drawImage(image, 0, 100, 150, 150, 300, 0, 150, 150);
複製代碼/<code>

Api 中奇怪之處在於，sx,sy,swidth,sheight 為選填參數，但位置在 dx, dy, dWidth, dHeight 之前。

Canvas 輸出圖片

調用 canvas 的 toDataURL 方法可以輸出 base64 格式的圖片。

<code>canvas.toDataURL(`image/${type}`);
複製代碼/<code>

Api 解析：toDataURL

<code>canvas.toDataURL(type, encoderOptions);
複製代碼/<code>

type 可選

圖片格式，默認為 image/png。

encoderOptions 可選

在指定圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區間內選擇圖片的質量。如果超出取值範圍，將會使用默認值 0.92。其他參數會被忽略。

a 標籤的下載

調用

Api 解析：download

<code>// href 下載必填

複製代碼/<code>

filename

選填，規定作為文件名來使用的文本。

href

文件的下載地址。

非主流瀏覽器下載處理

到此可以解決 Chroma 、 Firefox 和 Safari（自測支持） 瀏覽器的下載功能，因為 IE 等瀏覽器不支持 download 屬性，所以需要進行其他方式的下載，也就有了代碼中的後續內容。

<code>// base64 圖片轉 blob 後下載
downloadImg() {
  let parts = this.compressImg.split(';base64,');
  let contentType = parts[0].split(':')[1];
  let raw = window.atob(parts[1]);
  let rawLength = raw.length;
  let uInt8Array = new Uint8Array(rawLength);
  for(let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  const blob = new Blob([uInt8Array], {type: contentType});
  this.compressImg = URL.createObjectURL(blob);
  if (window.navigator.msSaveOrOpenBlob) {
    // 兼容 ie 的下載方式
    window.navigator.msSaveOrOpenBlob(blob, this.fileName);
  }else{ 

    const a = document.createElement('a');
    a.href = this.compressImg;
    a.setAttribute('download', this.fileName);
    a.click();
  }
}

複製代碼/<code>

• 將之前 canvas 生成的 base64 數據拆分後，通過 atob 方法解碼
• 將解碼後的數據轉換成 Uint8Array 格式的無符號整形數組
• 轉換後的數組來生成一個 Blob 數據對象，通過 URL.createObjectURL(blob) 來生成一個臨時的 DOM 對象
• 之後 IE 類瀏覽器可以調用 window.navigator.msSaveOrOpenBlob 方法來執行下載，其他瀏覽器也可以繼續通過

Api 解析：atob

base-64 解碼使用方法是 atob()。

<code>window.atob(encodedStr)

複製代碼/<code>

encodedStr

必需，是一個通過 btoa() 方法編碼的字符串，btoa()是 base64 編碼的使用方法。

Api 解析：Uint8Array

<code>new Uint8Array(length) 


複製代碼/<code>

length

創建初始化為 0 的，包含 length 個元素的無符號整型數組。

Api 解析： Blob

Blob 對象表示一個不可變、原始數據的類文件對象。

<code>// 構造函數允許通過其它對象創建 Blob 對象
new Blob([obj],{type:createType}) 

複製代碼/<code>

obj

字符串內容

createType

要構造的類型

兼容性 IE 10 以上

Api 解析：createObjectURL

靜態方法會創建一個 DOMString。

<code>objectURL = URL.createObjectURL(object);

複製代碼/<code>

object

用於創建 URL 的 File 對象、Blob 對象或者 MediaSource 對象。

Api 解析： window.navigator

<code>// 官方已不建議使用的文件下載方式，僅針對 ie 且兼容性 10 以上
// msSaveBlob 僅提供下載
// msSaveOrOpenBlob 支持下載和打開
window.navigator.msSaveOrOpenBlob(blob, fileName);

複製代碼/<code>

blob

要下載的 blob 對象

fileName

下載後命名的文件名稱。

總結

本文僅針對圖片壓縮介紹了一些思路，簡單的使用場景可能如下介紹，當然也會引申出來更多的使用場景，這些還有待大家一起挖掘。

• 上傳存儲圖片如果需要對文件大小格式有要求的，可以統一壓縮處理圖片
• 前臺頁面想要編輯圖片，可以在 Canvas 處理圖片的時候，加一些其他邏輯，例如添加文字，剪裁，拼圖等等操作

當然溫馨提示：因部分接口有 IE 兼容性問題，IE 瀏覽器方面，僅能支持 IE10 以上版本進行下載。

推薦圖片優化以及移動端兼容相關文章

《 》

《 》

《 》

《 》

《 》

《 》

《 》

《 》

《 》

《 》

《 》

《 》

《 》

《 》

《 》

作者：政採雲前端團隊
轉發鏈接：https://juejin.im/post/5ea574cc518825736e57fcca

閱讀更多 Echa攻城獅 的文章

關鍵字: 壓縮 虛擬機 場景