　　前言

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

　　插播一下，本文案例已整理成外掛，已上傳 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) 物件。一般的，它們有如下轉化關係：

　　js-image-compressor-flow-chat

　　具體實現

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

　　file2DataUrl(file, callback)

　　使用者透過頁面標籤上傳的本地圖片直接轉化 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:,

　　比如一張 png 格式圖片，轉化為 base64 字串形式：

　　data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAgAElEQVR4XuxdB5g。

　　file2Image(file, callback)

　　若想將使用者透過本地上傳的圖片放入快取並 img 標籤顯示出來，除了可以利用以上方法轉化成的 base64 字串作為圖片 src，還可以直接用 URL 物件，引用儲存在 File 和 Blob 中資料的 URL。使用物件 URL 的好處是可以不必把檔案內容讀取到 JavaScript 中而直接使用檔案內容。為此，只要在需要檔案內容的地方提供物件 URL 即可。

　　注意：要建立物件 URL，可以使用 window.URL.createObjectURL() 方法，並傳入 File 或 Blob 物件。如果不再需要相應資料，最好釋放它佔用的內容。但只要有程式碼在引用物件 URL，記憶體就不會釋放。要手工釋放記憶體，可以把物件 URL 傳給 URL.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 物件。

　　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 直接把檔案上傳到伺服器。

　　也可以使用 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)

　　這個簡易圖片壓縮方法呼叫和入參：

　　如果看到這裡的客官不嫌棄這個 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 的小夥伴可以戳這裡

　　總結

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

JS壓縮圖片?掌握這一篇就夠了

相關文章