JS 圖片壓縮

時間  2020-04-28
標籤 圖片 壓縮 欄目 JavaScript 简体版
原文   原文鏈接
第 47 篇原創好文～
本文首發於政採雲前端團隊博客： JS 圖片壓縮

前言

提及圖片壓縮，你們想到的或者平時用到的不少工具均可以實現，例如，客戶端類的有圖片壓縮工具 PPDuck3， JS 實現類的有插件 compression.js ，亦或是在線處理類的 OSS 上傳，文件上傳後，在訪問文件時中也有圖片的壓縮配置選項，不過，能不能本身擼一套 JS 實現的圖片壓縮代碼呢？固然能夠，那咱們先來理一下思路。html

壓縮思路

涉及到 JS 的圖片壓縮，個人想法是須要用到 Canvas 的繪圖能力，經過調整圖片的分辨率或者繪圖質量來達到圖片壓縮的效果，實現思路以下：前端

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

優缺點介紹

不過 Canvas 壓縮的方式也有着本身的優缺點：web

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

代碼實現

<template>
  <div class="container">
    <input type="file" id="input-img" @change="compress" />
    <a :download="fileName" :href="compressImg" >普通下載</a>
    <button @click="downloadImg">兼容 IE 下載</button>
    <div>
      <img :src="compressImg" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'compress',
  data: function() {
    return {
      compressImg: null,
      fileName: null,
    };
  },
  components: {},
  methods: {
    compress() {
      // 獲取文件對象
      const fileObj = document.querySelector('#input-img').files[0];
      // 獲取文件名稱，後續下載重命名
      this.fileName = `${new Date().getTime()}-${fileObj.name}`;
      // 獲取文件後綴名
      const fileNames = fileObj.name.split('.');
      const type = fileNames[fileNames.length-1];
      // 壓縮圖片
      this.handleCompressImage(fileObj, type);
    },
    handleCompressImage(img, type) {
      const vm = this;
      let reader = new FileReader();
      // 讀取文件
      reader.readAsDataURL(img);
      reader.onload = function(e) {
        let image = new Image(); //新建一個img標籤
        image.src = e.target.result;
        image.onload = function() {
          let canvas = document.createElement('canvas');
          let context = canvas.getContext('2d');
          // 定義 canvas 大小，也就是壓縮後下載的圖片大小
          let imageWidth = image.width; //壓縮後圖片的大小
          let imageHeight = image.height;
          canvas.width = imageWidth;
          canvas.height = imageHeight;
          
          // 圖片不壓縮，所有加載展現
          context.drawImage(image, 0, 0);
          // 圖片按壓縮尺寸載入
          // let imageWidth = 500; //壓縮後圖片的大小
          // let imageHeight = 200;
          // context.drawImage(image, 0, 0, 500, 200);
          // 圖片去截取指定位置載入
          // context.drawImage(image,100, 100, 100, 100, 0, 0, imageWidth, imageHeight);
          vm.compressImg = canvas.toDataURL(`image/${type}`);
        };
      };
    },
    // 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();
      }
    },
  }
};
</script>

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

Input 上傳 File 處理

將 File 對象經過 FileReader 的 readAsDataURL 方法轉換爲URL格式的字符串（base64編碼）數組

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

Canvas 處理 File 對象

創建一個 Image 對象，一個 canvas 畫布，設定本身想要下載的圖片尺寸，調用 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 畫布上規劃出一片區域用來放置圖片，dx, dy 爲繪圖位置在 Canvas 元素的 X 軸、Y 軸座標，dWidth, dHeight 指在 Canvas 元素上繪製圖像的寬度和高度（若是不說明， 在繪製時圖片的寬度和高度不會縮放）。this

sx , sy , swidth , sheight

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

如下爲圖片繪製的實例：

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 爲選填參數，但位置在 dx, dy, dWidth, dHeight 以前。

Canvas 輸出圖片

調用 canvas 的 toDataURL 方法能夠輸出 base64 格式的圖片。

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

Api 解析：toDataURL

canvas.toDataURL(type, encoderOptions);

type 可選

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

encoderOptions 可選

在指定圖片格式爲 image/jpeg 或 image/webp的狀況下，能夠從 0 到 1 的區間內選擇圖片的質量。若是超出取值範圍，將會使用默認值 0.92。其餘參數會被忽略。

a 標籤的下載

調用 <a> 標籤的 download 屬性，便可完成圖片的下載。

Api 解析：download

// href 下載必填
<a download="filename" href="href"> 下載 </a>

filename

選填，規定做爲文件名來使用的文本。

href

文件的下載地址。

非主流瀏覽器下載處理

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

// 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();
  }
}
  • 將以前 canvas 生成的 base64 數據拆分後，經過 atob 方法解碼
  • 將解碼後的數據轉換成 Uint8Array 格式的無符號整形數組
  • 轉換後的數組來生成一個 Blob 數據對象，經過 URL.createObjectURL(blob) 來生成一個臨時的 DOM 對象
  • 以後 IE 類瀏覽器能夠調用 window.navigator.msSaveOrOpenBlob 方法來執行下載，其餘瀏覽器也能夠繼續經過 <a> 標籤的 download 屬性來進行下載

Api 解析：atob

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

window.atob(encodedStr)

encodedStr

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

Api 解析：Uint8Array

new Uint8Array(length)

length

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

Api 解析： Blob

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

// 構造函數容許經過其它對象建立 Blob 對象
new Blob([obj],{type:createType})

obj

字符串內容

createType

要構造的類型

兼容性 IE 10 以上

Api 解析：createObjectURL

靜態方法會建立一個 DOMString。

objectURL = URL.createObjectURL(object);

object

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

Api 解析： window.navigator

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

blob

要下載的 blob 對象

fileName

下載後命名的文件名稱。

總結

本文僅針對圖片壓縮介紹了一些思路，簡單的使用場景可能以下介紹，固然也會引伸出來更多的使用場景，這些還有待你們一塊兒挖掘。

  • 上傳存儲圖片若是須要對文件大小格式有要求的，能夠統一壓縮處理圖片
  • 前臺頁面想要編輯圖片，能夠在 Canvas 處理圖片的時候，加一些其餘邏輯，例如添加文字，剪裁，拼圖等等操做

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

招賢納士

政採雲前端團隊（ZooTeam），一個年輕富有激情和創造力的前端團隊，隸屬於政採雲產品研發部，Base 在風景如畫的杭州。團隊現有 50 餘個前端小夥伴，平均年齡 27 歲，近 3 成是全棧工程師，妥妥的青年風暴團。成員構成既有來自於阿里、網易的「老」兵，也有浙大、中科大、杭電等校的應屆新人。團隊在平常的業務對接以外，還在物料體系、工程平臺、搭建平臺、性能體驗、雲端應用、數據分析及可視化等方向進行技術探索和實戰，推進並落地了一系列的內部技術產品，持續探索前端技術體系的新邊界。

若是你想改變一直被事折騰，但願開始能折騰事；若是你想改變一直被告誡須要多些想法，卻無從破局；若是你想改變你有能力去作成那個結果，卻不須要你；若是你想改變你想作成的事須要一個團隊去支撐，但沒你帶人的位置；若是你想改變既定的節奏，將會是「5 年工做時間 3 年工做經驗」；若是你想改變原本悟性不錯，但老是有那一層窗戶紙的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程，親手推進一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我以爲咱們該聊聊。任什麼時候間，等着你寫點什麼，發給 ZooTeam@cai-inc.com

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程