前言

十年的昌樂網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整昌樂建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)建站從事“昌樂網(wǎng)站設(shè)計”,“昌樂網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

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

壓縮思路

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

•  獲取上傳 Input 中的圖片對象 File
•  將圖片轉(zhuǎn)換成 base64 格式
•  base64 編碼的圖片通過 Canvas 轉(zhuǎn)換壓縮，這里會用到的 Canvas 的 drawImage 以及 toDataURL 這兩個 Api，一個調(diào)節(jié)圖片的分辨率的，一個是調(diào)節(jié)圖片壓縮質(zhì)量并且輸出的，后續(xù)會有詳細介紹
•  轉(zhuǎn)換后的圖片生成對應的新圖片，然后輸出

優(yōu)缺點介紹

不過 Canvas 壓縮的方式也有著自己的優(yōu)缺點：

•  優(yōu)點：實現(xiàn)簡單，參數(shù)可以配置化，自定義圖片的尺寸，指定區(qū)域裁剪等等。
•  缺點：只有 jpeg 、webp 支持原圖尺寸下圖片質(zhì)量的調(diào)整來達到壓縮圖片的效果，其他圖片格式，僅能通過調(diào)節(jié)尺寸來實現(xiàn)

代碼實現(xiàn)

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

Input 上傳 File 處理

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

 
 
 
 

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

Canvas 處理 File 對象

建立一個 Image 對象，一個 canvas 畫布，設(shè)定自己想要下載的圖片尺寸，調(diào)用 drawImage 方法在 canvas 中繪制上傳的圖片

 
 
 
 

  
  
  
  
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);
 
 
 
 

Api 解析：drawImage

 
 
 
 

  
  
  
  
context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
 
 
 
 

img

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

dx、dy、dWidth、dHeight

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

sx、sy、swidth、sheight

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

以下為圖片繪制的實例：

 
 
 
 

  
  
  
  
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);
 
 
 
 

Api 中奇怪之處在于，sx、sy、swidth、sheight 為選填參數(shù)，但位置在 dx、dy、dWidth、dHeight 之前。

Canvas 輸出圖片

調(diào)用 canvas 的 toDataURL 方法可以輸出 base64 格式的圖片。

 
 
 
 

  
  
  
  
canvas.toDataURL(`image/${type}`);
 
 
 
 

Api 解析：toDataURL

 
 
 
 

  
  
  
  
canvas.toDataURL(type, encoderOptions);
 
 
 
 

type 可選

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

encoderOptions 可選

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

a 標簽的下載

調(diào)用 標簽的 download 屬性，即可完成圖片的下載。

Api 解析：download

 
 
 
 

  
  
  
  
// href 下載必填 
  
  
  
  
 下載 
 
 
 
 

filename

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

href

文件的下載地址。

非主流瀏覽器下載處理

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

 
 
 
 

  
  
  
  
// base64 圖片轉(zhuǎn) blob 后下載 
  
  
  
  
downloadImg() { 
  
  
  
  
  let parts = this.compressImg.split(';base64,'); 
  
  
  
  
  let contentType = parts[0].split(':')[1]; 
  
  
  
  
  let raw = window.atob(parts[1]); 
  
  
  
  
  let rawrawLength = 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(); 
  
  
  
  
  } 
  
  
  
  
}
 
 
 
 

•  將之前 canvas 生成的 base64 數(shù)據(jù)拆分后，通過 atob 方法解碼
•  將解碼后的數(shù)據(jù)轉(zhuǎn)換成 Uint8Array 格式的無符號整形數(shù)組
•  轉(zhuǎn)換后的數(shù)組來生成一個 Blob 數(shù)據(jù)對象，通過 URL.createObjectURL(blob) 來生成一個臨時的 DOM 對象
•  之后 IE 類瀏覽器可以調(diào)用 window.navigator.msSaveOrOpenBlob 方法來執(zhí)行下載，其他瀏覽器也可以繼續(xù)通過 標簽的 download 屬性來進行下載

 
 
 
 

  
  
  
  
window.atob(encodedStr)
 
 
 
 

 
 
 
 

  
  
  
  
new Uint8Array(length)
 
 
 
 

 
 
 
 

  
  
  
  
// 構(gòu)造函數(shù)允許通過其它對象創(chuàng)建 Blob 對象 
  
  
  
  
new Blob([obj],{type:createType}) 
 
 
 
 

 
 
 
 

  
  
  
  
objectURL = URL.createObjectURL(object);
 
 
 
 

 
 
 
 

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