怎么用JS壓縮圖片

本篇內(nèi)容主要講解“怎么用JS壓縮圖片”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用JS壓縮圖片”吧!

轉(zhuǎn)化關(guān)系

在實際應(yīng)用中有可能使用的情境：大多時候我們直接讀取用戶上傳的 File 對象，讀寫到畫布（canvas）上，利用 Canvas 的 API 進(jìn)行壓縮，完成壓縮之后再轉(zhuǎn)成 File（Blob） 對象，上傳到遠(yuǎn)程圖片服務(wù)器；不妨有時候我們也需要將一個 base64 字符串壓縮之后再變?yōu)?nbsp;base64 字符串傳入到遠(yuǎn)程數(shù)據(jù)庫或者再轉(zhuǎn)成 File（Blob） 對象。一般的，它們有如下轉(zhuǎn)化關(guān)系：

具體實現(xiàn)

下面將按照轉(zhuǎn)化關(guān)系圖中的轉(zhuǎn)化方法一一實現(xiàn)。

file2DataUrl(file, callback)

用戶通過頁面標(biāo)簽 <input type="file" /> 上傳的本地圖片直接轉(zhuǎn)化 data URL 字符串形式?？梢允褂?nbsp;FileReader 文件讀取構(gòu)造函數(shù)。FileReader 對象允許 Web 應(yīng)用程序異步讀取存儲在計算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。該實例方法 readAsDataURL 讀取文件內(nèi)容并轉(zhuǎn)化成 base64 字符串。在讀取完后，在實例屬性 result 上可獲取文件內(nèi)容。

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

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

data:<mediatype>,<data>

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

file2Image(file, callback)

若想將用戶通過本地上傳的圖片放入緩存并 img 標(biāo)簽顯示出來，除了可以利用以上方法轉(zhuǎn)化成的 base64 字符串作為圖片 src，還可以直接用 URL 對象，引用保存在 File 和 Blob 中數(shù)據(jù)的 URL。使用對象 URL 的好處是可以不必把文件內(nèi)容讀取到 JavaScript 中 而直接使用文件內(nèi)容。為此，只要在需要文件內(nèi)容的地方提供對象 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);       URL.revokeObjectURL(url);     };     image.src = url;   } else {     inputFile2DataUrl(file, function(dataUrl) {       image.onload = function() {         callback(image);       }       image.src = dataUrl;     });   } }

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

url2Image(url, callback)

通過圖片鏈接（url）獲取圖片 Image 對象，由于圖片加載是異步的，因此放到回調(diào)函數(shù) 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);

參數(shù)：

• image 繪制到上下文的元素；

• sx 繪制選擇框左上角以 Image 為基準(zhǔn) X 軸坐標(biāo)；

• sy 繪制選擇框左上角以 Image 為基準(zhǔn) Y 軸坐標(biāo)；

• sWidth 繪制選擇框?qū)挾龋?/p>

• sHeight 繪制選擇框?qū)挾龋?/p>

• dx Image 的左上角在目標(biāo) canvas 上 X 軸坐標(biāo)；

• dy Image 的左上角在目標(biāo) canvas 上 Y 軸坐標(biāo)；

• dWidth Image 在目標(biāo) canvas 上繪制的寬度；

• dHeight Image 在目標(biāo) 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 。同時可以指定輸出格式和質(zhì)量。

參數(shù)分別為：

• type 圖片格式，默認(rèn)為 image/png。

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

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 字符串轉(zhuǎn)化為 Blob 對象。主要思路是：先將 data URL 數(shù)據(jù)（data） 部分提取出來，用 atob 對經(jīng)過 base64 編碼的字符串進(jìn)行解碼，再轉(zhuǎn)化成 Unicode 編碼，存儲在Uint8Array（8位無符號整型數(shù)組，每個元素是一個字節(jié)） 類型數(shù)組，最終轉(zhuǎn)化成 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]) 方法創(chuàng)造 Blob 對象，用以展示 canvas 上的圖片；這個圖片文件可以被緩存或保存到本地，由用戶代理端自行決定。第二個參數(shù)指定圖片格式，如不特別指明，圖片的類型默認(rèn)為 image/png，分辨率為 96dpi。第三個參數(shù)用于針對image/jpeg 格式的圖片進(jìn)行輸出圖片的質(zhì)量設(shè)置。

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 對象轉(zhuǎn)化成 data URL 數(shù)據(jù)，由于 FileReader 的實例 readAsDataURL 方法不僅支持讀取文件，還支持讀取 Blob 對象數(shù)據(jù)，這里復(fù)用上面 file2DataUrl 方法即可：

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

blob2Image(blob, callback)

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

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

upload(url, file, callback)

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

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 讀取文件內(nèi)容，轉(zhuǎn)化成二進(jìn)制上傳

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

實現(xiàn)簡易圖片壓縮

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

/**  * 簡易圖片壓縮方法  * @param {Object} options 相關(guān)參數(shù)  */ (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); };    /**    * 簡易圖片壓縮構(gòu)造函數(shù)    * @param {Object} options 相關(guān)參數(shù)    */   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)     })   }    /**    * 壓縮之前，讀取圖片之后鉤子函數(shù)    */   _proto.beforeCompress = function beforeCompress() {     if (isFunc(this.options.beforeCompress)) {       this.options.beforeCompress(this.file);     }   }    // 省略 `util` 公用方法定義   // ...    // 將 `util` 公用方法添加到實例的靜態(tài)屬性上   for (key in util) {     if (util.hasOwnProperty(key)) {       SimpleImageCompressor[key] = util[key];     }   } })(window)

這個簡易圖片壓縮方法調(diào)用和入?yún)ⅲ?/p>

var fileEle = document.getElementById('file');  fileEle.addEventListener('change', function () {   file = this.files[0];    var options = {     file: file,     quality: 0.6,     mimeType: 'image/jpeg',     // 壓縮前回調(diào)     beforeCompress: function (result) {       console.log('壓縮之前圖片尺寸大小: ', result.size);       console.log('mime 類型: ', result.type);       // 將上傳圖片在頁面預(yù)覽       // SimpleImageCompressor.file2DataUrl(result, function (url) {       //   document.getElementById('origin').src = url;       // })     },     // 壓縮成功回調(diào)     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;       // })        // 上傳到遠(yuǎn)程服務(wù)器       // SimpleImageCompressor.upload('/upload.png', result);     }   };    new SimpleImageCompressor(options); }, false);

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

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

• png 格式圖片同格式壓縮，壓縮率不高，還有可能出現(xiàn)“不減反增”現(xiàn)象；

• 有些情況，其他格式轉(zhuǎn)化成 png 格式也會出現(xiàn)“不減反增”現(xiàn)象；

• 大尺寸 png 格式圖片在一些手機(jī)上，壓縮后出現(xiàn)“黑屏”現(xiàn)象； 

改進(jìn)版圖片壓縮

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

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

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

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

輸出圖片的尺寸確定了，接下來就是按這個尺寸創(chuàng)建一個 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 格式圖片同格式壓縮，壓縮率不高，還有可能出現(xiàn)“不減反增”現(xiàn)象

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

因為我們在“具體實現(xiàn)”中兩個有關(guān)壓縮關(guān)鍵 API：

• toBlob(callback, [type], [encoderOptions]) 參數(shù) encoderOptions 用于針對image/jpeg 格式的圖片進(jìn)行輸出圖片的質(zhì)量設(shè)置；

• toDataURL(type, encoderOptions 參數(shù)encoderOptions 在指定圖片格式為 image/jpeg 或 image/webp 的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。

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

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

// `png` 格式圖片大小超過 `convertSize`, 轉(zhuǎn)化成 `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 格式圖片在一些手機(jī)上，壓縮后出現(xiàn)“黑屏”現(xiàn)象；

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

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

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

// ... // 限制最小和最大寬高 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));  // ... // 覆蓋默認(rèn)填充顏色 (#000) var fillStyle = 'transparent'; context.fillStyle = fillStyle;

到此，相信大家對“怎么用JS壓縮圖片”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！