做者：wuwhsjavascript
https://segmentfault.com/a/1190000023486410前端
前言
公司的移動端業務須要在用戶上傳圖片是由前端壓縮圖片大小，再上傳到服務器，這樣能夠減小移動端上行流量，減小用戶上傳等待時長，優化用戶體驗。java
插播一下，本文案例已整理成插件，已上傳 npm ，可經過 npm install js-image-compressor -D 安裝使用，能夠從 github 下載。git
JavaScript 操做壓縮圖片原理不難，已有成熟 API，然而在實際輸出壓縮後結果卻總有意外，有些圖片竟會越壓縮越大，加之終端（手機）類型衆多，有些手機壓縮圖片甚至變黑。github
因此本文將試圖解決以下問題：web
-
弄清 Image 對象、data URL、Canvas 和 File（Blob）之間的轉化關係； -
圖片壓縮關鍵技巧； -
超大圖片壓縮黑屏問題。
轉化關係
在實際應用中有可能使用的情境：大多時候咱們直接讀取用戶上傳的 File 對象，讀寫到畫布（canvas）上，利用 Canvas 的 API 進行壓縮，完成壓縮以後再轉成 File（Blob） 對象，上傳到遠程圖片服務器；不妨有時候咱們也須要將一個 base64 字符串壓縮以後再變爲 base64 字符串傳入到遠程數據庫或者再轉成 File（Blob） 對象。通常的，它們有以下轉化關係：typescript
具體實現
下面將按照轉化關係圖中的轉化方法一一實現。數據庫
file2DataUrl(file, callback)
用戶經過頁面標籤 <input type="file" /> 上傳的本地圖片直接轉化 data URL 字符串形式。可使用 FileReader 文件讀取構造函數。FileReader 對象容許 Web 應用程序異步讀取存儲在計算機上的文件（或原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。該實例方法 readAsDataURL 讀取文件內容並轉化成 base64 字符串。在讀取完後，在實例屬性 result 上可獲取文件內容。npm
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 安裝使用，能夠從 github 下載。整理匆忙，若有問題歡迎你們指正，完～
本文分享自微信公衆號 - 編程微刊（wangxiaoting678）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。