整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
者：wuwhs
轉(zhuǎn)發(fā)鏈接：https://segmentfault.com/a/1190000023486410
公司的移動端業(yè)務(wù)需要在用戶上傳圖片是由前端壓縮圖片大小，再上傳到服務(wù)器，這樣可以減少移動端上行流量，減少用戶上傳等待時(shí)長，優(yōu)化用戶體驗(yàn)。前段時(shí)間小編也發(fā)布一篇關(guān)于《JS 圖片簡易壓縮【實(shí)踐】 》，有興趣的小伙伴也可以看看。
插播一下，本文案例已整理成插件，已上傳 npm ，可通過 npm install js-image-compressor -D 安裝使用，可以從 github 下載。
github：https://github.com/wuwhs/js-image-compressor
JavaScript 操作壓縮圖片原理不難，已有成熟 API，然而在實(shí)際輸出壓縮后結(jié)果卻總有意外，有些圖片竟會越壓縮越大，加之終端（手機(jī)）類型眾多，有些手機(jī)壓縮圖片甚至變黑。
所以本文將試圖解決如下問題：
在實(shí)際應(yīng)用中有可能使用的情境：大多時(shí)候我們直接讀取用戶上傳的 File 對象，讀寫到畫布（canvas）上，利用 Canvas 的 API 進(jìn)行壓縮，完成壓縮之后再轉(zhuǎn)成 File（Blob） 對象，上傳到遠(yuǎn)程圖片服務(wù)器；不妨有時(shí)候我們也需要將一個 base64 字符串壓縮之后再變?yōu)?base64 字符串傳入到遠(yuǎn)程數(shù)據(jù)庫或者再轉(zhuǎn)成 File（Blob） 對象。一般的，它們有如下轉(zhuǎn)化關(guān)系：
下面將按照轉(zhuǎn)化關(guān)系圖中的轉(zhuǎn)化方法一一實(shí)現(xiàn)。
用戶通過頁面標(biāo)簽 <input type="file" /> 上傳的本地圖片直接轉(zhuǎn)化 data URL 字符串形式。可以使用 FileReader 文件讀取構(gòu)造函數(shù)。FileReader 對象允許 Web 應(yīng)用程序異步讀取存儲在計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。該實(shí)例方法 readAsDataURL 讀取文件內(nèi)容并轉(zhuǎn)化成 base64 字符串。在讀取完后，在實(shí)例屬性 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。
若想將用戶通過本地上傳的圖片放入緩存并 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);
window.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 傳給 window.revokeObjectURL()。
通過圖片鏈接（url）獲取圖片 Image 對象，由于圖片加載是異步的，因此放到回調(diào)函數(shù) callback 回傳獲取到的 Image 對象。
function url2Image(url, callback) {
var image=new Image();
image.src=url;
image.onload=function() {
callback(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ù)：
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;
}HTMLCanvasElement 對象有 toDataURL(type, encoderOptions) 方法，返回一個包含圖片展示的 data URL 。同時(shí)可以指定輸出格式和質(zhì)量。
參數(shù)分別為：
function canvas2DataUrl(canvas, quality, type) {
return canvas.toDataURL(type || 'image/jpeg', quality || 0.8);
}圖片鏈接也可以是 base64 字符串，直接賦值給 Image 對象 src 即可。
function dataUrl2Image(dataUrl, callback) {
var image=new Image();
image.onload=function() {
callback(image);
};
image.src=dataUrl;
}將 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});
}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));
}
});
}將 Blob 對象轉(zhuǎn)化成 data URL 數(shù)據(jù)，由于 FileReader 的實(shí)例 readAsDataURL 方法不僅支持讀取文件，還支持讀取 Blob 對象數(shù)據(jù)，這里復(fù)用上面 file2DataUrl 方法即可：
function blob2DataUrl(blob, callback) {
file2DataUrl(blob, callback);
}將 Blob 對象轉(zhuǎn)化成 Image 對象，可通過 URL 對象引用文件，也支持引用 Blob 這樣的類文件對象，同樣，這里復(fù)用上面 file2Image 方法即可：
function blob2Image(blob, callback) {
file2Image(blob, 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);
}在熟悉以上各種圖片轉(zhuǎn)化方法的具體實(shí)現(xiàn)，將它們封裝在一個公用對象 util 里，再結(jié)合壓縮轉(zhuǎn)化流程圖，這里我們可以簡單實(shí)現(xiàn)圖片壓縮了：首先將上傳圖片轉(zhuǎn)化成 Image 對象，再將寫入到 Canvas 畫布，最后由 Canvas 對象 API 對圖片的大小和尺寸輸出調(diào)整，實(shí)現(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` 公用方法添加到實(shí)例的靜態(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)還存在如下問題：
俗話說“羅馬不是一天建成的”，通過上述實(shí)驗(yàn)，我們發(fā)現(xiàn)了很多不足，下面將逐條問題分析，尋求解決方案。
壓縮輸出圖片寸尺固定為原始圖片尺寸大小，而實(shí)際可能需要控制輸出圖片尺寸，同時(shí)達(dá)到尺寸也被壓縮目的；
為了避免壓縮圖片變形，一般采用等比縮放，首先要計(jì)算出原始圖片寬高比 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 格式圖片壓縮成自身格式，這樣壓縮率不理想，有時(shí)反而會造成自身質(zhì)量變得更大。
因?yàn)槲覀冊凇熬唧w實(shí)現(xiàn)”中兩個有關(guān)壓縮關(guān)鍵 API：
均未對 png 格式圖片有壓縮效果。
有個折衷的方案，我們可以設(shè)置一個閾值，如果 png 圖片的質(zhì)量小于這個值，就還是壓縮輸出 png 格式，這樣最差的輸出結(jié)果不至于質(zhì)量太大，在此基礎(chǔ)上，如果壓縮后圖片大小 “不減反增”，我們就兜底處理輸出源圖片給用戶。當(dāng)圖片質(zhì)量大于某個值時(shí)，我們壓縮成 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;到這里，上述的意外問題被我們一一解決了，如需體驗(yàn)改進(jìn)版的圖片壓縮 demo 的小伙伴可以戳這里
我們梳理了通過頁面標(biāo)簽 <input type="file" /> 上傳本地圖片到圖片被壓縮整個過程，也覆蓋到了在實(shí)際使用中還存在的一些意外情況，提供了相應(yīng)的解決方案。將改進(jìn)版圖片壓縮整理成插件，已上傳 npm ，可通過 npm install js-image-compressor -D 安裝使用。整理匆忙，如有問題歡迎大家指正，完～
作者：wuwhs
轉(zhuǎn)發(fā)鏈接：https://segmentfault.com/a/1190000023486410
事起源于一個很小問題，我寫了個代碼，被質(zhì)疑有問題：簡化之后大概如下：
let a;
const x={ b: 123 };
a=123,
delete x被質(zhì)疑的主要原因是第三行a=123的后面為什么是逗號，不是分號。坦白來說，我是簡單的手誤，將分號錯寫成了逗號。但是感覺貌似應(yīng)該也沒有什么問題，畢竟uglifyjs會將某些語句進(jìn)行合并，將分號變成逗號。繼而再一想，uglifyjs是如何來進(jìn)行代碼壓縮的、它是如何知道該合并哪些語句，不合并哪些語句的、 它又有哪些合并規(guī)則？于是有了本文。
要想了解JS的壓縮原理，需要首先了解AST。
抽象語法樹：AST（Abstract Syntax Tree)，是源代碼的抽象語法結(jié)構(gòu)的樹狀表現(xiàn)形式，這里特指編程語言的源代碼。樹上的每個節(jié)點(diǎn)都表示源代碼中的一種結(jié)構(gòu)。之所以說語法是「抽象」的，是因?yàn)檫@里的語法并不會表示出真實(shí)語法中出現(xiàn)的每個細(xì)節(jié)。舉個例子：
從上面兩個例子中，可以看出AST是源代碼根據(jù)其語法結(jié)構(gòu)，省略一些細(xì)節(jié)（比如：括號沒有生成節(jié)點(diǎn)），抽象成樹形表達(dá)。抽象語法樹在計(jì)算機(jī)科學(xué)中有很多應(yīng)用，比如編譯器、IDE、壓縮代碼、格式化代碼等。[1]
了解了AST之后，我們再分析一下JS的代碼壓縮原理。簡單的說，就是
1. 將code轉(zhuǎn)換成AST
2. 將AST進(jìn)行優(yōu)化，生成一個更小的AST
3. 將新生成的AST再轉(zhuǎn)化成codePS：具體的AST樹大家可以在 astexplorer 上在線獲得
babel，eslint，v8的邏輯均與此類似，下圖是我們引用了babel的轉(zhuǎn)化示意圖：
以我們之前被質(zhì)疑的代碼為例，看看它在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();
// 轉(zhuǎn)化為一顆更小的 AST 樹
compressor=UglifyJS.Compressor();
ast=ast.transform(compressor);
// 再把 AST 轉(zhuǎn)化為代碼
code=ast.print_to_string();
// var a,x={b:123};a=123,delete x;
console.log("code", code);到這里，我們已經(jīng)了解了uglifyjs的代碼壓縮原理，但是還沒有解決一個問題——為什么某些語句間的分號會被轉(zhuǎn)換為逗號，某些不會轉(zhuǎn)換。這就涉及到了uglifyjs的壓縮規(guī)則。
由于uglifyjs的代碼壓縮規(guī)則很多，我們這里只分析與本文中相關(guān)的部分:
uglifyjs的全部壓縮規(guī)則可以參見：《[解讀uglifyJS（四）——Javascript代碼壓縮](https://rapheal.sinaapp.com/2014/05/22/uglifyjs-squeeze/#more-705)》連續(xù)的"表達(dá)式語句"可以合并成一個逗號表達(dá)式
PS： 在線demo
這其中需要注意的是只有“表達(dá)式語句”才能被合并，那么什么是表達(dá)式語句呢？
表達(dá)式 ：表達(dá)式都會返回一個值，可以放在任何一個需要值的地方
例如：
a; //返回a的值
b + 3; // 返回b+3的結(jié)果語句： 語句是一個行為，通常利用一個或多個關(guān)鍵字來完成給定的任務(wù)。程序由一系列語句構(gòu)成。其中流控制語句有：if/while/for等。
例如：
if(x > 0) {
...
}
for(var i=0;i < arr.length; i ++) {
...
}
const a=123;表達(dá)式語句 ：既是表達(dá)式，又是語句
例如：
A();
function() {}();
delete x.b;
b=b + 3;綜上所述，因?yàn)閍=123 和 delete x都是表達(dá)式語句，所以分號被轉(zhuǎn)換為逗號。而var x={b:123}則因?yàn)槭锹暶髡Z句，所以和a=123不會合并，分號不會被轉(zhuǎn)換。但var x={b:123}和第一行var a又觸發(fā)了另外一條規(guī)則，
多個var聲明可以壓縮成一個var聲明
所以第一行和第二行會被合并為var a,x={b:123}
在本文中，我們討論了什么是抽象語法樹，uglifyjs的壓縮原理，以及相應(yīng)的壓縮規(guī)則，最終明晰了為什么代碼會被壓縮成我們得到的樣子，希望對大家有所幫助。
者：wuwhs
https://segmentfault.com/a/1190000023486410
已獲原作者授權(quán)轉(zhuǎn)載
公司的移動端業(yè)務(wù)需要在用戶上傳圖片是由前端壓縮圖片大小，再上傳到服務(wù)器，這樣可以減少移動端上行流量，減少用戶上傳等待時(shí)長，優(yōu)化用戶體驗(yàn)。
插播一下，本文案例已整理成插件，已上傳 npm ，可通過 npm install js-image-compressor -D 安裝使用，可以從 github 下載。
JavaScript 操作壓縮圖片原理不難，已有成熟 API，然而在實(shí)際輸出壓縮后結(jié)果卻總有意外，有些圖片竟會越壓縮越大，加之終端（手機(jī)）類型眾多，有些手機(jī)壓縮圖片甚至變黑。
所以本文將試圖解決如下問題：
在實(shí)際應(yīng)用中有可能使用的情境：大多時(shí)候我們直接讀取用戶上傳的 File 對象，讀寫到畫布（canvas）上，利用 Canvas 的 API 進(jìn)行壓縮，完成壓縮之后再轉(zhuǎn)成 File（Blob） 對象，上傳到遠(yuǎn)程圖片服務(wù)器；不妨有時(shí)候我們也需要將一個 base64 字符串壓縮之后再變?yōu)?base64 字符串傳入到遠(yuǎn)程數(shù)據(jù)庫或者再轉(zhuǎn)成 File（Blob） 對象。一般的，它們有如下轉(zhuǎn)化關(guān)系：
下面將按照轉(zhuǎn)化關(guān)系圖中的轉(zhuǎn)化方法一一實(shí)現(xiàn)。
用戶通過頁面標(biāo)簽 <input type="file" /> 上傳的本地圖片直接轉(zhuǎn)化 data URL 字符串形式。可以使用 FileReader 文件讀取構(gòu)造函數(shù)。FileReader 對象允許 Web 應(yīng)用程序異步讀取存儲在計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。該實(shí)例方法 readAsDataURL 讀取文件內(nèi)容并轉(zhuǎn)化成 base64 字符串。在讀取完后，在實(shí)例屬性 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。
若想將用戶通過本地上傳的圖片放入緩存并 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); window.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 傳給 window.revokeObjectURL()。
通過圖片鏈接（url）獲取圖片 Image 對象，由于圖片加載是異步的，因此放到回調(diào)函數(shù) callback 回傳獲取到的 Image 對象。
function url2Image(url, callback) { var image=new Image(); image.src=url; image.onload=function() { callback(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ù)：
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;}HTMLCanvasElement 對象有 toDataURL(type, encoderOptions) 方法，返回一個包含圖片展示的 data URL 。同時(shí)可以指定輸出格式和質(zhì)量。
參數(shù)分別為：
function canvas2DataUrl(canvas, quality, type) { return canvas.toDataURL(type || 'image/jpeg', quality || 0.8);}圖片鏈接也可以是 base64 字符串，直接賦值給 Image 對象 src 即可。
function dataUrl2Image(dataUrl, callback) { var image=new Image(); image.onload=function() { callback(image); }; image.src=dataUrl;}將 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});}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)); } });}將 Blob 對象轉(zhuǎn)化成 data URL 數(shù)據(jù)，由于 FileReader 的實(shí)例 readAsDataURL 方法不僅支持讀取文件，還支持讀取 Blob 對象數(shù)據(jù)，這里復(fù)用上面 file2DataUrl 方法即可：
function blob2DataUrl(blob, callback) { file2DataUrl(blob, callback);}將 Blob 對象轉(zhuǎn)化成 Image 對象，可通過 URL 對象引用文件，也支持引用 Blob 這樣的類文件對象，同樣，這里復(fù)用上面 file2Image 方法即可：
function blob2Image(blob, callback) { file2Image(blob, 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);}在熟悉以上各種圖片轉(zhuǎn)化方法的具體實(shí)現(xiàn)，將它們封裝在一個公用對象 util 里，再結(jié)合壓縮轉(zhuǎn)化流程圖，這里我們可以簡單實(shí)現(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` 公用方法添加到實(shí)例的靜態(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)還存在如下問題：
俗話說“羅馬不是一天建成的”，通過上述實(shí)驗(yàn)，我們發(fā)現(xiàn)了很多不足，下面將逐條問題分析，尋求解決方案。
壓縮輸出圖片寸尺固定為原始圖片尺寸大小，而實(shí)際可能需要控制輸出圖片尺寸，同時(shí)達(dá)到尺寸也被壓縮目的；
為了避免壓縮圖片變形，一般采用等比縮放，首先要計(jì)算出原始圖片寬高比 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 格式圖片壓縮成自身格式，這樣壓縮率不理想，有時(shí)反而會造成自身質(zhì)量變得更大。
因?yàn)槲覀冊凇熬唧w實(shí)現(xiàn)”中兩個有關(guān)壓縮關(guān)鍵 API：
均未對 png 格式圖片有壓縮效果。
有個折衷的方案，我們可以設(shè)置一個閾值，如果 png 圖片的質(zhì)量小于這個值，就還是壓縮輸出 png 格式，這樣最差的輸出結(jié)果不至于質(zhì)量太大，在此基礎(chǔ)上，如果壓縮后圖片大小 “不減反增”，我們就兜底處理輸出源圖片給用戶。當(dāng)圖片質(zhì)量大于某個值時(shí)，我們壓縮成 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;到這里，上述的意外問題被我們一一解決了，如需體驗(yàn)改進(jìn)版的圖片壓縮 demo 的小伙伴可以戳這里
我們梳理了通過頁面標(biāo)簽 <input type="file" /> 上傳本地圖片到圖片被壓縮整個過程，也覆蓋到了在實(shí)際使用中還存在的一些意外情況，提供了相應(yīng)的解決方案。將改進(jìn)版圖片壓縮整理成插件，已上傳 npm ，可通過 npm install js-image-compressor -D 安裝使用，可以從 github 下載。整理匆忙，如有問題歡迎大家指正，完～
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
