者：wuwhs

轉發鏈接：https://segmentfault.com/a/1190000023486410

前言

公司的移動端業務需要在用戶上傳圖片是由前端壓縮圖片大小，再上傳到服務器，這樣可以減少移動端上行流量，減少用戶上傳等待時長，優化用戶體驗。前段時間小編也發布一篇關于《JS 圖片簡易壓縮【實踐】 》，有興趣的小伙伴也可以看看。

插播一下，本文案例已整理成插件，已上傳 npm ，可通過 npm install js-image-compressor -D 安裝使用，可以從 github 下載。

github：https://github.com/wuwhs/js-image-compressor

JavaScript 操作壓縮圖片原理不難，已有成熟 API，然而在實際輸出壓縮后結果卻總有意外，有些圖片竟會越壓縮越大，加之終端（手機）類型眾多，有些手機壓縮圖片甚至變黑。

所以本文將試圖解決如下問題：

• 弄清 Image 對象、data URL、Canvas 和 File（Blob）之間的轉化關系；
• 圖片壓縮關鍵技巧；
• 超大圖片壓縮黑屏問題。

轉化關系

在實際應用中有可能使用的情境：大多時候我們直接讀取用戶上傳的 File 對象，讀寫到畫布（canvas）上，利用 Canvas 的 API 進行壓縮，完成壓縮之后再轉成 File（Blob） 對象，上傳到遠程圖片服務器；不妨有時候我們也需要將一個 base64 字符串壓縮之后再變為 base64 字符串傳入到遠程數據庫或者再轉成 File（Blob） 對象。一般的，它們有如下轉化關系：

具體實現

下面將按照轉化關系圖中的轉化方法一一實現。

file2DataUrl(file, callback)

用戶通過頁面標簽 <input type="file" /> 上傳的本地圖片直接轉化 data URL 字符串形式。可以使用 FileReader 文件讀取構造函數。FileReader 對象允許 Web 應用程序異步讀取存儲在計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。該實例方法 readAsDataURL 讀取文件內容并轉化成 base64 字符串。在讀取完后，在實例屬性 result 上可獲取文件內容。

function file2DataUrl(file, callback) {
  var reader=new FileReader();
  reader.onload=function () {
    callback(reader.result);
  };
  reader.readAsDataURL(file);
}

Data URL 由四個部分組成：前綴（data:）、指示數據類型的 MIME 類型、如果非文本則為可選的 base64 標記、數據本身：

data:<mediatype>,<data>

比如一張 png 格式圖片，轉化為 base64 字符串形式：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAgAElEQVR4XuxdB5g。

file2Image(file, callback)

若想將用戶通過本地上傳的圖片放入緩存并 img 標簽顯示出來，除了可以利用以上方法轉化成的 base64 字符串作為圖片 src，還可以直接用 URL 對象，引用保存在 File 和 Blob 中數據的 URL。使用對象 URL 的好處是可以不必把文件內容讀取到 JavaScript 中 而直接使用文件內容。為此，只要在需要文件內容的地方提供對象 URL 即可。

function file2Image(file, callback) {
  var image=new Image();
  var URL=window.webkitURL || window.URL;
  if (URL) {
    var url=URL.createObjectURL(file);
    image.onload=function() {
      callback(image);
      window.revokeObjectURL(url);
    };
    image.src=url;
  } else {
    inputFile2DataUrl(file, function(dataUrl) {
      image.onload=function() {
        callback(image);
      }
      image.src=dataUrl;
    });
  }
}

注意：要創建對象 URL，可以使用 window.URL.createObjectURL() 方法，并傳入 File 或 Blob 對象。如果不再需要相應數據，最好釋放它占用的內容。但只要有代碼在引用對象 URL，內存就不會釋放。要手工釋放內存，可以把對象 URL 傳給 window.revokeObjectURL()。

url2Image(url, callback)

通過圖片鏈接（url）獲取圖片 Image 對象，由于圖片加載是異步的，因此放到回調函數 callback 回傳獲取到的 Image 對象。

function url2Image(url, callback) {
  var image=new Image();
  image.src=url;
  image.onload=function() {
    callback(image);
  }
}

image2Canvas(image)

利用 drawImage() 方法將 Image 對象繪畫在 Canvas 對象上。

drawImage 有三種語法形式：

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

參數：

• image 繪制到上下文的元素；
• sx 繪制選擇框左上角以 Image 為基準 X 軸坐標；
• sy 繪制選擇框左上角以 Image 為基準 Y 軸坐標；
• sWidth 繪制選擇框寬度；
• sHeight 繪制選擇框寬度；
• dx Image 的左上角在目標 canvas 上 X 軸坐標；
• dy Image 的左上角在目標 canvas 上 Y 軸坐標；
• dWidth Image 在目標 canvas 上繪制的寬度；
• dHeight Image 在目標 canvas 上繪制的高度；

function image2Canvas(image) {
  var canvas=document.createElement('canvas');
  var ctx=canvas.getContext('2d');
  canvas.width=image.naturalWidth;
  canvas.height=image.naturalHeight;
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  return canvas;
}

canvas2DataUrl(canvas, quality, type)

HTMLCanvasElement 對象有 toDataURL(type, encoderOptions) 方法，返回一個包含圖片展示的 data URL 。同時可以指定輸出格式和質量。

參數分別為：

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

function canvas2DataUrl(canvas, quality, type) {
  return canvas.toDataURL(type || 'image/jpeg', quality || 0.8);
}

dataUrl2Image(dataUrl, callback)

圖片鏈接也可以是 base64 字符串，直接賦值給 Image 對象 src 即可。

function dataUrl2Image(dataUrl, callback) {
  var image=new Image();
  image.onload=function() {
    callback(image);
  };
  image.src=dataUrl;
}

dataUrl2Blob(dataUrl, type)

將 data URL 字符串轉化為 Blob 對象。主要思路是：先將 data URL 數據（data） 部分提取出來，用 atob 對經過 base64 編碼的字符串進行解碼，再轉化成 Unicode 編碼，存儲在Uint8Array（8位無符號整型數組，每個元素是一個字節） 類型數組，最終轉化成 Blob 對象。

function dataUrl2Blob(dataUrl, type) {
  var data=dataUrl.split(',')[1];
  var mimePattern=/^data:(.*?)(;base64)?,/;
  var mime=dataUrl.match(mimePattern)[1];
  var binStr=atob(data);
  var arr=new Uint8Array(len);

  for (var i=0; i < len; i++) {
    arr[i]=binStr.charCodeAt(i);
  }
  return new Blob([arr], {type: type || mime});
}

canvas2Blob(canvas, callback, quality, type)

HTMLCanvasElement 有 toBlob(callback, [type], [encoderOptions]) 方法創造 Blob 對象，用以展示 canvas 上的圖片；這個圖片文件可以被緩存或保存到本地，由用戶代理端自行決定。第二個參數指定圖片格式，如不特別指明，圖片的類型默認為 image/png，分辨率為 96dpi。第三個參數用于針對image/jpeg 格式的圖片進行輸出圖片的質量設置。

function canvas2Blob(canvas, callback, quality, type){
  canvas.toBlob(function(blob) {
    callback(blob);
  }, type || 'image/jpeg', quality || 0.8);
}

為兼容低版本瀏覽器，作為 toBlob 的 polyfill 方案，可以用上面 data URL 生成 Blob 方法 dataUrl2Blob 作為HTMLCanvasElement 原型方法。

if (!HTMLCanvasElement.prototype.toBlob) {
 Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function (callback, type, quality) {
    let dataUrl=this.toDataURL(type, quality);
    callback(dataUrl2Blob(dataUrl));
  }
 });
}

blob2DataUrl(blob, callback)

將 Blob 對象轉化成 data URL 數據，由于 FileReader 的實例 readAsDataURL 方法不僅支持讀取文件，還支持讀取 Blob 對象數據，這里復用上面 file2DataUrl 方法即可：

function blob2DataUrl(blob, callback) {
  file2DataUrl(blob, callback);
}

blob2Image(blob, callback)

將 Blob 對象轉化成 Image 對象，可通過 URL 對象引用文件，也支持引用 Blob 這樣的類文件對象，同樣，這里復用上面 file2Image 方法即可：

function blob2Image(blob, callback) {
  file2Image(blob, callback);
}

upload(url, file, callback)

上傳圖片（已壓縮），可以使用 FormData 傳入文件對象，通過 XHR 直接把文件上傳到服務器。

function upload(url, file, callback) {
  var xhr=new XMLHttpRequest();
  var fd=new FormData();
  fd.append('file', file);
  xhr.onreadystatechange=function () {
    if (xhr.readyState===4 && xhr.status===200) {
      // 上傳成功
      callback && callback(xhr.responseText);
    } else {
      throw new Error(xhr);
    }
  }
  xhr.open('POST', url, true);
  xhr.send(fd);
}

也可以使用 FileReader 讀取文件內容，轉化成二進制上傳

function upload(url, file) {
  var reader=new FileReader();
  var xhr=new XMLHttpRequest();

  xhr.open('POST', url, true);
  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');

  reader.onload=function() {
    xhr.send(reader.result);
  };
  reader.readAsBinaryString(file);
}

實現簡易圖片壓縮

在熟悉以上各種圖片轉化方法的具體實現，將它們封裝在一個公用對象 util 里，再結合壓縮轉化流程圖，這里我們可以簡單實現圖片壓縮了：首先將上傳圖片轉化成 Image 對象，再將寫入到 Canvas 畫布，最后由 Canvas 對象 API 對圖片的大小和尺寸輸出調整，實現壓縮目的。

/**
 * 簡易圖片壓縮方法
 * @param {Object} options 相關參數
 */
(function (win) {
  var REGEXP_IMAGE_TYPE=/^image\//;
  var util={};
  var defaultOptions={
    file: null,
    quality: 0.8
  };
  var isFunc=function (fn) { return typeof fn==='function'; };
  var isImageType=function (value) { return REGEXP_IMAGE_TYPE.test(value); };

  /**
   * 簡易圖片壓縮構造函數
   * @param {Object} options 相關參數
   */
  function SimpleImageCompressor(options) {
    options=Object.assign({}, defaultOptions, options);
    this.options=options;
    this.file=options.file;
    this.init();
  }

  var _proto=SimpleImageCompressor.prototype;
  win.SimpleImageCompressor=SimpleImageCompressor;

  /**
   * 初始化
   */
  _proto.init=function init() {
    var _this=this;
    var file=this.file;
    var options=this.options;

    if (!file || !isImageType(file.type)) {
      console.error('請上傳圖片文件!');
      return;
    }

    if (!isImageType(options.mimeType)) {
      options.mimeType=file.type;
    }

    util.file2Image(file, function (img) {
      var canvas=util.image2Canvas(img);
      file.width=img.naturalWidth;
      file.height=img.naturalHeight;
      _this.beforeCompress(file, canvas);

      util.canvas2Blob(canvas, function (blob) {
        blob.width=canvas.width;
        blob.height=canvas.height;
        options.success && options.success(blob);
      }, options.quality, options.mimeType)
    })
  }

  /**
   * 壓縮之前，讀取圖片之后鉤子函數
   */
  _proto.beforeCompress=function beforeCompress() {
    if (isFunc(this.options.beforeCompress)) {
      this.options.beforeCompress(this.file);
    }
  }

  // 省略 `util` 公用方法定義
  // ...

  // 將 `util` 公用方法添加到實例的靜態屬性上
  for (key in util) {
    if (util.hasOwnProperty(key)) {
      SimpleImageCompressor[key]=util[key];
    }
  }
})(window)

這個簡易圖片壓縮方法調用和入參：

var fileEle=document.getElementById('file');

fileEle.addEventListener('change', function () {
  file=this.files[0];

  var options={
    file: file,
    quality: 0.6,
    mimeType: 'image/jpeg',
    // 壓縮前回調
    beforeCompress: function (result) {
      console.log('壓縮之前圖片尺寸大小: ', result.size);
      console.log('mime 類型: ', result.type);
      // 將上傳圖片在頁面預覽
      // SimpleImageCompressor.file2DataUrl(result, function (url) {
      //   document.getElementById('origin').src=url;
      // })
    },
    // 壓縮成功回調
    success: function (result) {
      console.log('壓縮之后圖片尺寸大小: ', result.size);
      console.log('mime 類型: ', result.type);
      console.log('壓縮率： ', (result.size / file.size * 100).toFixed(2) + '%');

      // 生成壓縮后圖片在頁面展示
      // SimpleImageCompressor.file2DataUrl(result, function (url) {
      //   document.getElementById('output').src=url;
      // })

      // 上傳到遠程服務器
      // SimpleImageCompressor.upload('/upload.png', result);
    }
  };

  new SimpleImageCompressor(options);
}, false);

如果看到這里的客官不嫌棄這個 demo 太簡單可以戳這里試試水。如果你有足夠的耐心多傳幾種類型圖片就會發現還存在如下問題：

• 壓縮輸出圖片寸尺固定為原始圖片尺寸大小，而實際可能需要控制輸出圖片尺寸，同時達到尺寸也被壓縮目的；
• png 格式圖片同格式壓縮，壓縮率不高，還有可能出現“不減反增”現象；
• 有些情況，其他格式轉化成 png 格式也會出現“不減反增”現象；
• 大尺寸 png 格式圖片在一些手機上，壓縮后出現“黑屏”現象；

改進版圖片壓縮

俗話說“羅馬不是一天建成的”，通過上述實驗，我們發現了很多不足，下面將逐條問題分析，尋求解決方案。

壓縮輸出圖片寸尺固定為原始圖片尺寸大小，而實際可能需要控制輸出圖片尺寸，同時達到尺寸也被壓縮目的；

為了避免壓縮圖片變形，一般采用等比縮放，首先要計算出原始圖片寬高比 aspectRatio，用戶設置的高層以 aspectRatio，得出等比縮放后的寬，若比用戶設置寬的小，則用戶設置的高為為基準縮放，否則以寬為基準縮放。

var aspectRatio=naturalWidth / naturalHeight;
var width=Math.max(options.width, 0) || naturalWidth;
var height=Math.max(options.height, 0) || naturalHeight;
if (height * aspectRatio > width) {
  height=width / aspectRatio;
} else {
  width=height * aspectRatio;
}

輸出圖片的尺寸確定了，接下來就是按這個尺寸創建一個 Canvas 畫布，將圖片畫上去。這里可以將上面提到的 image2Canvas 方法稍微做一下改造：

function image2Canvas(image, destWidth, destHeight) {
  var canvas=document.createElement('canvas');
  var ctx=canvas.getContext('2d');
  canvas.width=destWidth || image.naturalWidth;
  canvas.height=destHeight || image.naturalHeight;
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  return canvas;
}

png 格式圖片同格式壓縮，壓縮率不高，還有可能出現“不減反增”現象

一般的，不建議將 png 格式圖片壓縮成自身格式，這樣壓縮率不理想，有時反而會造成自身質量變得更大。

因為我們在“具體實現”中兩個有關壓縮關鍵 API：

• toBlob(callback, [type], [encoderOptions]) 參數 encoderOptions 用于針對image/jpeg 格式的圖片進行輸出圖片的質量設置；
• toDataURL(type, encoderOptions 參數encoderOptions 在指定圖片格式為 image/jpeg 或 image/webp 的情況下，可以從 0 到 1 的區間內選擇圖片的質量。

均未對 png 格式圖片有壓縮效果。

有個折衷的方案，我們可以設置一個閾值，如果 png 圖片的質量小于這個值，就還是壓縮輸出 png 格式，這樣最差的輸出結果不至于質量太大，在此基礎上，如果壓縮后圖片大小 “不減反增”，我們就兜底處理輸出源圖片給用戶。當圖片質量大于某個值時，我們壓縮成 jpeg 格式。

// `png` 格式圖片大小超過 `convertSize`, 轉化成 `jpeg` 格式
if (file.size > options.convertSize && options.mimeType==='image/png') {
  options.mimeType='image/jpeg';
}
// 省略一些代碼
// ...
// 用戶期待的輸出寬高沒有大于源圖片的寬高情況下，輸出文件大小大于源文件，返回源文件
if (result.size > file.size && !(options.width > naturalWidth || options.height > naturalHeight)) {
  result=file;
}

大尺寸 png 格式圖片在一些手機上，壓縮后出現“黑屏”現象；

由于各大瀏覽器對 Canvas 最大尺寸支持不同

如果圖片尺寸過大，再創建同尺寸畫布，再畫上圖片，就會出現異常情況，即生成的畫布沒有圖片像素，而畫布本身默認給的背景色為黑色，這樣就導致圖片“黑屏”情況。

這里可以通過控制輸出圖片最大寬高防止生成畫布越界，并且用透明色覆蓋默認黑色背景解決解決“黑屏”問題：

// ...
// 限制最小和最大寬高
var maxWidth=Math.max(options.maxWidth, 0) || Infinity;
var maxHeight=Math.max(options.maxHeight, 0) || Infinity;
var minWidth=Math.max(options.minWidth, 0) || 0;
var minHeight=Math.max(options.minHeight, 0) || 0;

if (maxWidth < Infinity && maxHeight < Infinity) {
  if (maxHeight * aspectRatio > maxWidth) {
    maxHeight=maxWidth / aspectRatio;
  } else {
    maxWidth=maxHeight * aspectRatio;
  }
} else if (maxWidth < Infinity) {
  maxHeight=maxWidth / aspectRatio;
} else if (maxHeight < Infinity) {
  maxWidth=maxHeight * aspectRatio;
}

if (minWidth > 0 && minHeight > 0) {
  if (minHeight * aspectRatio > minWidth) {
    minHeight=minWidth / aspectRatio;
  } else {
    minWidth=minHeight * aspectRatio;
  }
} else if (minWidth > 0) {
  minHeight=minWidth / aspectRatio;
} else if (minHeight > 0) {
  minWidth=minHeight * aspectRatio;
}

width=Math.floor(Math.min(Math.max(width, minWidth), maxWidth));
height=Math.floor(Math.min(Math.max(height, minHeight), maxHeight));

// ...
// 覆蓋默認填充顏色 (#000)
var fillStyle='transparent';
context.fillStyle=fillStyle;

到這里，上述的意外問題被我們一一解決了，如需體驗改進版的圖片壓縮 demo 的小伙伴可以戳這里

總結

我們梳理了通過頁面標簽 <input type="file" /> 上傳本地圖片到圖片被壓縮整個過程，也覆蓋到了在實際使用中還存在的一些意外情況，提供了相應的解決方案。將改進版圖片壓縮整理成插件，已上傳 npm ，可通過 npm install js-image-compressor -D 安裝使用。整理匆忙，如有問題歡迎大家指正，完～

作者：wuwhs

轉發鏈接：https://segmentfault.com/a/1190000023486410

事起源于一個很小問題，我寫了個代碼，被質疑有問題：簡化之后大概如下：

let a;
const x={ b: 123 };
a=123,
delete x

被質疑的主要原因是第三行a=123的后面為什么是逗號，不是分號。坦白來說，我是簡單的手誤，將分號錯寫成了逗號。但是感覺貌似應該也沒有什么問題，畢竟uglifyjs會將某些語句進行合并，將分號變成逗號。繼而再一想，uglifyjs是如何來進行代碼壓縮的、它是如何知道該合并哪些語句，不合并哪些語句的、 它又有哪些合并規則？于是有了本文。

1. AST（抽象語法樹）

要想了解JS的壓縮原理，需要首先了解AST。

抽象語法樹：AST（Abstract Syntax Tree)，是源代碼的抽象語法結構的樹狀表現形式，這里特指編程語言的源代碼。樹上的每個節點都表示源代碼中的一種結構。之所以說語法是「抽象」的，是因為這里的語法并不會表示出真實語法中出現的每個細節。

舉個例子：

從上面兩個例子中，可以看出AST是源代碼根據其語法結構，省略一些細節（比如：括號沒有生成節點），抽象成樹形表達。抽象語法樹在計算機科學中有很多應用，比如編譯器、IDE、壓縮代碼、格式化代碼等。[1]

2. 代碼壓縮原理

了解了AST之后，我們再分析一下JS的代碼壓縮原理。簡單的說，就是

1. 將code轉換成AST
2. 將AST進行優化，生成一個更小的AST
3. 將新生成的AST再轉化成code

PS：具體的AST樹大家可以在 astexplorer 上在線獲得

babel，eslint，v8的邏輯均與此類似，下圖是我們引用了babel的轉化示意圖：

以我們之前被質疑的代碼為例，看看它在uglify中是怎么樣一步一步被壓縮的：

// uglify-js的版本需要為2.x, 3.0之后uglifyjs不再暴露Compressor api
// 2.x的uglify不能自動解析es6，所以這里先切換成es5
// npm install uglify-js@2.x
var UglifyJS=require('uglify-js');

// 原始代碼
var code=`var a;
var x={ b: 123 };
a=123,
delete x`;

// 通過 UglifyJS 把代碼解析為 AST
var ast=UglifyJS.parse(code);
ast.figure_out_scope();

// 轉化為一顆更小的 AST 樹
compressor=UglifyJS.Compressor();
ast=ast.transform(compressor);

// 再把 AST 轉化為代碼
code=ast.print_to_string();

// var a,x={b:123};a=123,delete x;
console.log("code", code);

到這里，我們已經了解了uglifyjs的代碼壓縮原理，但是還沒有解決一個問題——為什么某些語句間的分號會被轉換為逗號，某些不會轉換。這就涉及到了uglifyjs的壓縮規則。

3. 代碼壓縮規則

由于uglifyjs的代碼壓縮規則很多，我們這里只分析與本文中相關的部分:

uglifyjs的全部壓縮規則可以參見：《[解讀uglifyJS（四）——Javascript代碼壓縮](https://rapheal.sinaapp.com/2014/05/22/uglifyjs-squeeze/#more-705)》

連續的"表達式語句"可以合并成一個逗號表達式

PS： 在線demo

這其中需要注意的是只有“表達式語句”才能被合并，那么什么是表達式語句呢？

表達式 VS 語句 VS 表達式語句

表達式 ：表達式都會返回一個值，可以放在任何一個需要值的地方

例如：

a; //返回a的值
    b + 3; // 返回b+3的結果

語句： 語句是一個行為，通常利用一個或多個關鍵字來完成給定的任務。程序由一系列語句構成。其中流控制語句有：if/while/for等。

例如：

if(x > 0) {
      ...
    }
    for(var i=0;i < arr.length; i ++) {
      ...
    }
    const a=123;

表達式語句 ：既是表達式，又是語句

例如：

A();
    function() {}();
    delete x.b;
    b=b + 3;

綜上所述，因為a=123 和 delete x都是表達式語句，所以分號被轉換為逗號。而var x={b:123}則因為是聲明語句，所以和a=123不會合并，分號不會被轉換。但var x={b:123}和第一行var a又觸發了另外一條規則，

多個var聲明可以壓縮成一個var聲明

所以第一行和第二行會被合并為var a,x={b:123}

4. 總結

在本文中，我們討論了什么是抽象語法樹，uglifyjs的壓縮原理，以及相應的壓縮規則，最終明晰了為什么代碼會被壓縮成我們得到的樣子，希望對大家有所幫助。

者：wuwhs

https://segmentfault.com/a/1190000023486410

已獲原作者授權轉載

前言

公司的移動端業務需要在用戶上傳圖片是由前端壓縮圖片大小，再上傳到服務器，這樣可以減少移動端上行流量，減少用戶上傳等待時長，優化用戶體驗。

插播一下，本文案例已整理成插件，已上傳 npm ，可通過 npm install js-image-compressor -D 安裝使用，可以從 github 下載。

JavaScript 操作壓縮圖片原理不難，已有成熟 API，然而在實際輸出壓縮后結果卻總有意外，有些圖片竟會越壓縮越大，加之終端（手機）類型眾多，有些手機壓縮圖片甚至變黑。

所以本文將試圖解決如下問題：

• 弄清 Image 對象、data URL、Canvas 和 File（Blob）之間的轉化關系；
• 圖片壓縮關鍵技巧；
• 超大圖片壓縮黑屏問題。

轉化關系

在實際應用中有可能使用的情境：大多時候我們直接讀取用戶上傳的 File 對象，讀寫到畫布（canvas）上，利用 Canvas 的 API 進行壓縮，完成壓縮之后再轉成 File（Blob） 對象，上傳到遠程圖片服務器；不妨有時候我們也需要將一個 base64 字符串壓縮之后再變為 base64 字符串傳入到遠程數據庫或者再轉成 File（Blob） 對象。一般的，它們有如下轉化關系：

具體實現

下面將按照轉化關系圖中的轉化方法一一實現。

file2DataUrl(file, callback)

用戶通過頁面標簽 <input type="file" /> 上傳的本地圖片直接轉化 data URL 字符串形式。可以使用 FileReader 文件讀取構造函數。FileReader 對象允許 Web 應用程序異步讀取存儲在計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。該實例方法 readAsDataURL 讀取文件內容并轉化成 base64 字符串。在讀取完后，在實例屬性 result 上可獲取文件內容。

function file2DataUrl(file, callback) {  var reader=new FileReader();  reader.onload=function () {    callback(reader.result);  };  reader.readAsDataURL(file);}

Data URL 由四個部分組成：前綴（data:）、指示數據類型的 MIME 類型、如果非文本則為可選的 base64 標記、數據本身：

data:<mediatype>,<data>

比如一張 png 格式圖片，轉化為 base64 字符串形式：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAgAElEQVR4XuxdB5g。

file2Image(file, callback)

若想將用戶通過本地上傳的圖片放入緩存并 img 標簽顯示出來，除了可以利用以上方法轉化成的 base64 字符串作為圖片 src，還可以直接用 URL 對象，引用保存在 File 和 Blob 中數據的 URL。使用對象 URL 的好處是可以不必把文件內容讀取到 JavaScript 中 而直接使用文件內容。為此，只要在需要文件內容的地方提供對象 URL 即可。

function file2Image(file, callback) {  var image=new Image();  var URL=window.webkitURL || window.URL;  if (URL) {    var url=URL.createObjectURL(file);    image.onload=function() {      callback(image);      window.revokeObjectURL(url);    };    image.src=url;  } else {    inputFile2DataUrl(file, function(dataUrl) {      image.onload=function() {        callback(image);      }      image.src=dataUrl;    });  }}

注意：要創建對象 URL，可以使用 window.URL.createObjectURL() 方法，并傳入 File 或 Blob 對象。如果不再需要相應數據，最好釋放它占用的內容。但只要有代碼在引用對象 URL，內存就不會釋放。要手工釋放內存，可以把對象 URL 傳給 window.revokeObjectURL()。

url2Image(url, callback)

通過圖片鏈接（url）獲取圖片 Image 對象，由于圖片加載是異步的，因此放到回調函數 callback 回傳獲取到的 Image 對象。

function url2Image(url, callback) {  var image=new Image();  image.src=url;  image.onload=function() {    callback(image);  }}

image2Canvas(image)

利用 drawImage() 方法將 Image 對象繪畫在 Canvas 對象上。

drawImage 有三種語法形式：

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

參數：

• image 繪制到上下文的元素；
• sx 繪制選擇框左上角以 Image 為基準 X 軸坐標；
• sy 繪制選擇框左上角以 Image 為基準 Y 軸坐標；
• sWidth 繪制選擇框寬度；
• sHeight 繪制選擇框寬度；
• dx Image 的左上角在目標 canvas 上 X 軸坐標；
• dy Image 的左上角在目標 canvas 上 Y 軸坐標；
• dWidth Image 在目標 canvas 上繪制的寬度；
• dHeight Image 在目標 canvas 上繪制的高度；

function image2Canvas(image) {  var canvas=document.createElement('canvas');  var ctx=canvas.getContext('2d');  canvas.width=image.naturalWidth;  canvas.height=image.naturalHeight;  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);  return canvas;}

canvas2DataUrl(canvas, quality, type)

HTMLCanvasElement 對象有 toDataURL(type, encoderOptions) 方法，返回一個包含圖片展示的 data URL 。同時可以指定輸出格式和質量。

參數分別為：

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

function canvas2DataUrl(canvas, quality, type) {  return canvas.toDataURL(type || 'image/jpeg', quality || 0.8);}

dataUrl2Image(dataUrl, callback)

圖片鏈接也可以是 base64 字符串，直接賦值給 Image 對象 src 即可。

function dataUrl2Image(dataUrl, callback) {  var image=new Image();  image.onload=function() {    callback(image);  };  image.src=dataUrl;}

dataUrl2Blob(dataUrl, type)

將 data URL 字符串轉化為 Blob 對象。主要思路是：先將 data URL 數據（data） 部分提取出來，用 atob 對經過 base64 編碼的字符串進行解碼，再轉化成 Unicode 編碼，存儲在Uint8Array（8位無符號整型數組，每個元素是一個字節） 類型數組，最終轉化成 Blob 對象。

function dataUrl2Blob(dataUrl, type) {  var data=dataUrl.split(',')[1];  var mimePattern=/^data:(.*?)(;base64)?,/;  var mime=dataUrl.match(mimePattern)[1];  var binStr=atob(data);  var arr=new Uint8Array(len);  for (var i=0; i < len; i++) {    arr[i]=binStr.charCodeAt(i);  }  return new Blob([arr], {type: type || mime});}

canvas2Blob(canvas, callback, quality, type)

HTMLCanvasElement 有 toBlob(callback, [type], [encoderOptions]) 方法創造 Blob 對象，用以展示 canvas 上的圖片；這個圖片文件可以被緩存或保存到本地，由用戶代理端自行決定。第二個參數指定圖片格式，如不特別指明，圖片的類型默認為 image/png，分辨率為 96dpi。第三個參數用于針對image/jpeg 格式的圖片進行輸出圖片的質量設置。

function canvas2Blob(canvas, callback, quality, type){  canvas.toBlob(function(blob) {    callback(blob);  }, type || 'image/jpeg', quality || 0.8);}

為兼容低版本瀏覽器，作為 toBlob 的 polyfill 方案，可以用上面 data URL 生成 Blob 方法 dataUrl2Blob 作為HTMLCanvasElement 原型方法。

if (!HTMLCanvasElement.prototype.toBlob) { Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {  value: function (callback, type, quality) {    let dataUrl=this.toDataURL(type, quality);    callback(dataUrl2Blob(dataUrl));  } });}

blob2DataUrl(blob, callback)

將 Blob 對象轉化成 data URL 數據，由于 FileReader 的實例 readAsDataURL 方法不僅支持讀取文件，還支持讀取 Blob 對象數據，這里復用上面 file2DataUrl 方法即可：

function blob2DataUrl(blob, callback) {  file2DataUrl(blob, callback);}

blob2Image(blob, callback)

將 Blob 對象轉化成 Image 對象，可通過 URL 對象引用文件，也支持引用 Blob 這樣的類文件對象，同樣，這里復用上面 file2Image 方法即可：

function blob2Image(blob, callback) {  file2Image(blob, callback);}

upload(url, file, callback)

上傳圖片（已壓縮），可以使用 FormData 傳入文件對象，通過 XHR 直接把文件上傳到服務器。

function upload(url, file, callback) {  var xhr=new XMLHttpRequest();  var fd=new FormData();  fd.append('file', file);  xhr.onreadystatechange=function () {    if (xhr.readyState===4 && xhr.status===200) {      // 上傳成功      callback && callback(xhr.responseText);    } else {      throw new Error(xhr);    }  }  xhr.open('POST', url, true);  xhr.send(fd);}

也可以使用 FileReader 讀取文件內容，轉化成二進制上傳

function upload(url, file) {  var reader=new FileReader();  var xhr=new XMLHttpRequest();  xhr.open('POST', url, true);  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');  reader.onload=function() {    xhr.send(reader.result);  };  reader.readAsBinaryString(file);}

實現簡易圖片壓縮

在熟悉以上各種圖片轉化方法的具體實現，將它們封裝在一個公用對象 util 里，再結合壓縮轉化流程圖，這里我們可以簡單實現圖片壓縮了：

/** * 簡易圖片壓縮方法 * @param {Object} options 相關參數 */(function (win) {  var REGEXP_IMAGE_TYPE=/^image\//;  var util={};  var defaultOptions={    file: null,    quality: 0.8  };  var isFunc=function (fn) { return typeof fn==='function'; };  var isImageType=function (value) { return REGEXP_IMAGE_TYPE.test(value); };  /**   * 簡易圖片壓縮構造函數   * @param {Object} options 相關參數   */  function SimpleImageCompressor(options) {    options=Object.assign({}, defaultOptions, options);    this.options=options;    this.file=options.file;    this.init();  }  var _proto=SimpleImageCompressor.prototype;  win.SimpleImageCompressor=SimpleImageCompressor;  /**   * 初始化   */  _proto.init=function init() {    var _this=this;    var file=this.file;    var options=this.options;    if (!file || !isImageType(file.type)) {      console.error('請上傳圖片文件!');      return;    }    if (!isImageType(options.mimeType)) {      options.mimeType=file.type;    }    util.file2Image(file, function (img) {      var canvas=util.image2Canvas(img);      file.width=img.naturalWidth;      file.height=img.naturalHeight;      _this.beforeCompress(file, canvas);      util.canvas2Blob(canvas, function (blob) {        blob.width=canvas.width;        blob.height=canvas.height;        options.success && options.success(blob);      }, options.quality, options.mimeType)    })  }  /**   * 壓縮之前，讀取圖片之后鉤子函數   */  _proto.beforeCompress=function beforeCompress() {    if (isFunc(this.options.beforeCompress)) {      this.options.beforeCompress(this.file);    }  }  // 省略 `util` 公用方法定義  // ...  // 將 `util` 公用方法添加到實例的靜態屬性上  for (key in util) {    if (util.hasOwnProperty(key)) {      SimpleImageCompressor[key]=util[key];    }  }})(window)

這個簡易圖片壓縮方法調用和入參：

var fileEle=document.getElementById('file');fileEle.addEventListener('change', function () {  file=this.files[0];  var options={    file: file,    quality: 0.6,    mimeType: 'image/jpeg',    // 壓縮前回調    beforeCompress: function (result) {      console.log('壓縮之前圖片尺寸大小: ', result.size);      console.log('mime 類型: ', result.type);      // 將上傳圖片在頁面預覽      // SimpleImageCompressor.file2DataUrl(result, function (url) {      //   document.getElementById('origin').src=url;      // })    },    // 壓縮成功回調    success: function (result) {      console.log('壓縮之后圖片尺寸大小: ', result.size);      console.log('mime 類型: ', result.type);      console.log('壓縮率：', (result.size / file.size * 100).toFixed(2) + '%');      // 生成壓縮后圖片在頁面展示      // SimpleImageCompressor.file2DataUrl(result, function (url) {      //   document.getElementById('output').src=url;      // })      // 上傳到遠程服務器      // SimpleImageCompressor.upload('/upload.png', result);    }  };  new SimpleImageCompressor(options);}, false);

如果看到這里的客官不嫌棄這個 demo 太簡單可以戳這里試試水。如果你有足夠的耐心多傳幾種類型圖片就會發現還存在如下問題：

• 壓縮輸出圖片寸尺固定為原始圖片尺寸大小，而實際可能需要控制輸出圖片尺寸，同時達到尺寸也被壓縮目的；
• png 格式圖片同格式壓縮，壓縮率不高，還有可能出現“不減反增”現象；
• 有些情況，其他格式轉化成 png 格式也會出現“不減反增”現象；
• 大尺寸 png 格式圖片在一些手機上，壓縮后出現“黑屏”現象；

改進版圖片壓縮

俗話說“羅馬不是一天建成的”，通過上述實驗，我們發現了很多不足，下面將逐條問題分析，尋求解決方案。

壓縮輸出圖片寸尺固定為原始圖片尺寸大小，而實際可能需要控制輸出圖片尺寸，同時達到尺寸也被壓縮目的；

為了避免壓縮圖片變形，一般采用等比縮放，首先要計算出原始圖片寬高比 aspectRatio，用戶設置的高乘以 aspectRatio，得出等比縮放后的寬，若比用戶設置寬的小，則用戶設置的高為為基準縮放，否則以寬為基準縮放。

var aspectRatio=naturalWidth / naturalHeight;var width=Math.max(options.width, 0) || naturalWidth;var height=Math.max(options.height, 0) || naturalHeight;if (height * aspectRatio > width) {  height=width / aspectRatio;} else {  width=height * aspectRatio;}

輸出圖片的尺寸確定了，接下來就是按這個尺寸創建一個 Canvas 畫布，將圖片畫上去。這里可以將上面提到的 image2Canvas 方法稍微做一下改造：

function image2Canvas(image, destWidth, destHeight) {  var canvas=document.createElement('canvas');  var ctx=canvas.getContext('2d');  canvas.width=destWidth || image.naturalWidth;  canvas.height=destHeight || image.naturalHeight;  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);  return canvas;}

png 格式圖片同格式壓縮，壓縮率不高，還有可能出現“不減反增”現象

一般的，不建議將 png 格式圖片壓縮成自身格式，這樣壓縮率不理想，有時反而會造成自身質量變得更大。

因為我們在“具體實現”中兩個有關壓縮關鍵 API：

• toBlob(callback, [type], [encoderOptions]) 參數 encoderOptions 用于針對image/jpeg 格式的圖片進行輸出圖片的質量設置；
• toDataURL(type, encoderOptions 參數encoderOptions 在指定圖片格式為 image/jpeg 或 image/webp 的情況下，可以從 0 到 1 的區間內選擇圖片的質量。

均未對 png 格式圖片有壓縮效果。

有個折衷的方案，我們可以設置一個閾值，如果 png 圖片的質量小于這個值，就還是壓縮輸出 png 格式，這樣最差的輸出結果不至于質量太大，在此基礎上，如果壓縮后圖片大小 “不減反增”，我們就兜底處理輸出源圖片給用戶。當圖片質量大于某個值時，我們壓縮成 jpeg 格式。

// `png` 格式圖片大小超過 `convertSize`, 轉化成 `jpeg` 格式if (file.size > options.convertSize && options.mimeType==='image/png') {  options.mimeType='image/jpeg';}// 省略一些代碼// ...// 用戶期待的輸出寬高沒有大于源圖片的寬高情況下，輸出文件大小大于源文件，返回源文件if (result.size > file.size && !(options.width > naturalWidth || options.height > naturalHeight)) {  result=file;}

大尺寸 png 格式圖片在一些手機上，壓縮后出現“黑屏”現象；

由于各大瀏覽器對 Canvas 最大尺寸支持不同

如果圖片尺寸過大，在創建同尺寸畫布，再畫上圖片，就會出現異常情況，即生成的畫布沒有圖片像素，而畫布本身默認給的背景色為黑色，這樣就導致圖片“黑屏”情況。

這里可以通過控制輸出圖片最大寬高防止生成畫布越界，并且用透明色覆蓋默認黑色背景解決解決“黑屏”問題：

// ...// 限制最小和最大寬高var maxWidth=Math.max(options.maxWidth, 0) || Infinity;var maxHeight=Math.max(options.maxHeight, 0) || Infinity;var minWidth=Math.max(options.minWidth, 0) || 0;var minHeight=Math.max(options.minHeight, 0) || 0;if (maxWidth < Infinity && maxHeight < Infinity) {  if (maxHeight * aspectRatio > maxWidth) {    maxHeight=maxWidth / aspectRatio;  } else {    maxWidth=maxHeight * aspectRatio;  }} else if (maxWidth < Infinity) {  maxHeight=maxWidth / aspectRatio;} else if (maxHeight < Infinity) {  maxWidth=maxHeight * aspectRatio;}if (minWidth > 0 && minHeight > 0) {  if (minHeight * aspectRatio > minWidth) {    minHeight=minWidth / aspectRatio;  } else {    minWidth=minHeight * aspectRatio;  }} else if (minWidth > 0) {  minHeight=minWidth / aspectRatio;} else if (minHeight > 0) {  minWidth=minHeight * aspectRatio;}width=Math.floor(Math.min(Math.max(width, minWidth), maxWidth));height=Math.floor(Math.min(Math.max(height, minHeight), maxHeight));// ...// 覆蓋默認填充顏色 (#000)var fillStyle='transparent';context.fillStyle=fillStyle;

到這里，上述的意外問題被我們一一解決了，如需體驗改進版的圖片壓縮 demo 的小伙伴可以戳這里

總結

我們梳理了通過頁面標簽 <input type="file" /> 上傳本地圖片到圖片被壓縮整個過程，也覆蓋到了在實際使用中還存在的一些意外情況，提供了相應的解決方案。將改進版圖片壓縮整理成插件，已上傳 npm ，可通過 npm install js-image-compressor -D 安裝使用，可以從 github 下載。整理匆忙，如有問題歡迎大家指正，完～