整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
最近真是煩做好了外貿(mào)自建站獨(dú)立商城還是被打FB廣告的同事K說網(wǎng)站跳出率太高了，一定是網(wǎng)站的問題，雖然不服氣一肚子火但還是偷偷用谷歌的網(wǎng)站測(cè)試平臺(tái)Think with Google測(cè)速了一下，果然嚇一跳如圖
我的網(wǎng)站打開速度慢
從下載的建議報(bào)告中提出了很多待解決的問題，其中就包括要壓縮HTML、CSS、JS文件，如果要我一個(gè)個(gè)的找到這些文件并一個(gè)個(gè)壓縮完還不被同事K死呀，老板知道了更是不得了。干脆一次解決這個(gè)網(wǎng)頁壓縮的問題，于是就干脆搭建自己的網(wǎng)頁壓縮器一次搞定所有HTML、CSS、JS文件，在這里分享給同樣要提高網(wǎng)站打開速度的朋友。
第一步：網(wǎng)頁壓縮器源代碼在本博客文章里面下載，下載完解壓后把文件夾中的minify文件復(fù)制，把該文件復(fù)制到你的網(wǎng)站程序目錄下如圖所示
網(wǎng)頁壓縮器目錄
第二步：就是進(jìn)服務(wù)器執(zhí)行這個(gè)網(wǎng)頁壓縮器文件minify具體執(zhí)行代碼取決于你的服務(wù)器安裝的操作系統(tǒng)，這里的截圖是舉例，輸入cd網(wǎng)頁保存的目錄，再輸入Chmod 777 ./minify，設(shè)置minify的權(quán)限。
第三步：非常關(guān)鍵的操作，開始?jí)嚎s時(shí)，輸入“./minify -r -v -o 來源目錄 輸出目錄”具體目錄取決于你自己的文件路徑，舉例如圖
設(shè)置網(wǎng)頁壓縮器權(quán)限
執(zhí)行的這個(gè)網(wǎng)頁壓縮器是不是飛的一樣快，休一下就完成了。
網(wǎng)頁壓縮執(zhí)行效果
第四步，來檢查一下網(wǎng)頁壓縮效果，看看如圖
網(wǎng)頁壓縮效果
是不是包括所有HTML、CSS、JS文件一次都被壓縮了呀，而且不會(huì)導(dǎo)致CSS失效導(dǎo)致的網(wǎng)頁錯(cuò)位亂碼，真是個(gè)超強(qiáng)飛快的網(wǎng)頁壓縮器吧。
就像我在這個(gè)跨境電商公司做完那個(gè)自建站獨(dú)立商城后本來以為大部分工作都做完了后面就是維護(hù)小修商城就可以輕松了一下，沒想到實(shí)際運(yùn)行過程中還是很多事情，本著碰到問題解決問題的精神，以后也會(huì)在本博客分享自己碰到的實(shí)際問題并做分享，對(duì)老鳥高手來說是笑掉大牙的，就像這個(gè)網(wǎng)頁壓縮器一樣，希望對(duì)身為網(wǎng)頁設(shè)計(jì)的你有幫助吧。
avaScript 代碼壓縮是指去除源代碼里的所有不必要的字符，而不改變其功能的過程。這些不必要的字符通常包括空格字符，換行字符，注釋以及塊分隔符等用來增加可讀性的代碼，但并不需要它來執(zhí)行。
在這篇文章中，我們選擇了15個(gè)最好用的 JavaScript 壓縮工具，有簡單的在線轉(zhuǎn)換器，GUI工具和命令行界面等。
1. JavaScript Minifier
它是一個(gè)很好的工具，帶有API來縮小js代碼。
2. JSMIni
如果您想快速輕松地縮小JavaScript或jQuery文件，請(qǐng)使用jsMini。只需復(fù)制和粘貼源代碼，選擇要基本壓縮還是完全壓縮，然后縮小代碼。
3. JSCompress
JSCompress.com是一個(gè)在線javascript壓縮器，允許您壓縮和縮小javascript文件。壓縮的javascript文件是生產(chǎn)環(huán)境的理想選擇，因?yàn)樗鼈兺ǔ?huì)將文件的大小減少30-90%。大多數(shù)文件大小的減少是通過刪除Web瀏覽器或訪問者不需要的注釋和額外的空白字符來實(shí)現(xiàn)的。
4. Minifier
一個(gè)簡化CSS/JS的簡單工具，沒有大的設(shè)置。它將CSS中的URL從原來的位置重新工作到輸出位置。它會(huì)自動(dòng)解析CSS中的@import語句。
5. Gulp.js
js是流構(gòu)建系統(tǒng)。它使用流和代碼對(duì)配置，使一個(gè)更簡單和更直觀的構(gòu)建。通過更喜歡代碼而不是配置，GUMP使簡單的事情變得簡單，并使復(fù)雜的任務(wù)易于管理。通過利用節(jié)點(diǎn)流的強(qiáng)大功能，您可以獲得不將中間文件寫入磁盤的快速構(gòu)建。GUP的嚴(yán)格插件指南確保插件保持簡單，并按您預(yù)期的方式工作。
6. Uglifyjs
這個(gè)包實(shí)現(xiàn)了一個(gè)通用的JavaScript解析器/壓縮器/美化工具包。它是在NodeJS上開發(fā)的，但是它應(yīng)該在任何支持CommonJS模塊系統(tǒng)的JavaScript平臺(tái)上工作(如果您選擇的平臺(tái)不支持CommonJS，那么您可以很容易地實(shí)現(xiàn)它，或者放棄導(dǎo)出。
7. Grunt
grunt是一個(gè)用于JavaScript項(xiàng)目的基于任務(wù)的命令行構(gòu)建工具。它有以下可以在項(xiàng)目中使用的預(yù)定義任務(wù)：連接文件、使用JSHint驗(yàn)證文件、使用UGIFIFYJS執(zhí)行minify文件、使用節(jié)點(diǎn)單元運(yùn)行單元測(cè)試等等。
8. Koala
koala是一個(gè)GUI應(yīng)用程序，用于Less、Sass、Compass和CoffeeScript編譯，以幫助Web開發(fā)人員更有效地使用它們。考拉可以在Windows、Linux和Mac上運(yùn)行。
9. Prepros
PreProfessional是一個(gè)用于編譯更少的工具，Sass、Compass、Stylus、Jade以及更多的帶有自動(dòng)CSS前綴的工具，它帶有內(nèi)置的服務(wù)器，用于跨瀏覽器測(cè)試。它運(yùn)行在Windows、Mac和Linux上。
10. Ajax Minifier
此工具是一個(gè)Windows應(yīng)用程序，允許您在不使用命令行或VisualStudio的情況下運(yùn)行MicrosoftAjaxMinifier。它縮小了文件夾和嵌套文件夾中的所有javascript文件，縮小了單個(gè)javascript文件，啟用/禁用了小型程序的超壓縮和分析選項(xiàng)等等。
11. Smaller
更小的是一個(gè)強(qiáng)大的HTML，CSS和JavaScript壓縮器在OSX上，它也有能力將多個(gè)文件組合成一個(gè)。壓縮您的文件，使您的網(wǎng)站加載更快。
12. Ultra Minifier
超迷你是最簡單的YUI壓縮機(jī)GUI，以縮小Javascript和CSS代碼，而不使用終端。
13. Require JS
RequireJS是一個(gè)JavaScript文件和模塊加載器。它是為瀏覽器內(nèi)使用而優(yōu)化的，但它可以用于其他JavaScript環(huán)境，如Rhino和Node。使用像RequireJS這樣的模塊化腳本加載程序?qū)⑻岣叽a的速度和質(zhì)量。它包括一個(gè)優(yōu)化工具，可以作為部署代碼的打包步驟的一部分運(yùn)行。優(yōu)化工具可以組合和縮小JavaScript文件，以實(shí)現(xiàn)更好的性能。
14. Online JavaScript/CSS Compressor
這是一個(gè)用于壓縮JavaScript或CSS的Web接口。該工具使用UgulifyJS 2、Clean-CSS和HTML縮略符.
15. Minify
minify是一個(gè)PHP 5應(yīng)用程序，它可以幫助你遵循雅虎的一些高性能網(wǎng)站規(guī)則，它結(jié)合了多個(gè)css或Javascript文件，刪除了不必要的空白和注釋，并為它們提供gzip編碼和最佳客戶端緩存頭。
者：wuwhs
https://segmentfault.com/a/1190000023486410
已獲原作者授權(quán)轉(zhuǎn)載
公司的移動(dòng)端業(yè)務(wù)需要在用戶上傳圖片是由前端壓縮圖片大小，再上傳到服務(wù)器，這樣可以減少移動(dòng)端上行流量，減少用戶上傳等待時(shí)長，優(yōu)化用戶體驗(yàn)。
插播一下，本文案例已整理成插件，已上傳 npm ，可通過 npm install js-image-compressor -D 安裝使用，可以從 github 下載。
JavaScript 操作壓縮圖片原理不難，已有成熟 API，然而在實(shí)際輸出壓縮后結(jié)果卻總有意外，有些圖片竟會(huì)越壓縮越大，加之終端（手機(jī)）類型眾多，有些手機(jī)壓縮圖片甚至變黑。
所以本文將試圖解決如下問題：
在實(shí)際應(yīng)用中有可能使用的情境：大多時(shí)候我們直接讀取用戶上傳的 File 對(duì)象，讀寫到畫布（canvas）上，利用 Canvas 的 API 進(jìn)行壓縮，完成壓縮之后再轉(zhuǎn)成 File（Blob） 對(duì)象，上傳到遠(yuǎn)程圖片服務(wù)器；不妨有時(shí)候我們也需要將一個(gè) base64 字符串壓縮之后再變?yōu)?base64 字符串傳入到遠(yuǎn)程數(shù)據(jù)庫或者再轉(zhuǎn)成 File（Blob） 對(duì)象。一般的，它們有如下轉(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 對(duì)象允許 Web 應(yīng)用程序異步讀取存儲(chǔ)在計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對(duì)象指定要讀取的文件或數(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 由四個(gè)部分組成：前綴（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 對(duì)象，引用保存在 File 和 Blob 中數(shù)據(jù)的 URL。使用對(duì)象 URL 的好處是可以不必把文件內(nèi)容讀取到 JavaScript 中 而直接使用文件內(nèi)容。為此，只要在需要文件內(nèi)容的地方提供對(duì)象 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; }); }}注意：要?jiǎng)?chuàng)建對(duì)象 URL，可以使用 window.URL.createObjectURL() 方法，并傳入 File 或 Blob 對(duì)象。如果不再需要相應(yīng)數(shù)據(jù)，最好釋放它占用的內(nèi)容。但只要有代碼在引用對(duì)象 URL，內(nèi)存就不會(huì)釋放。要手工釋放內(nèi)存，可以把對(duì)象 URL 傳給 window.revokeObjectURL()。
通過圖片鏈接（url）獲取圖片 Image 對(duì)象，由于圖片加載是異步的，因此放到回調(diào)函數(shù) callback 回傳獲取到的 Image 對(duì)象。
function url2Image(url, callback) { var image = new Image(); image.src = url; image.onload = function() { callback(image); }}利用 drawImage() 方法將 Image 對(duì)象繪畫在 Canvas 對(duì)象上。
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 對(duì)象有 toDataURL(type, encoderOptions) 方法，返回一個(gè)包含圖片展示的 data URL 。同時(shí)可以指定輸出格式和質(zhì)量。
參數(shù)分別為：
function canvas2DataUrl(canvas, quality, type) { return canvas.toDataURL(type || 'image/jpeg', quality || 0.8);}圖片鏈接也可以是 base64 字符串，直接賦值給 Image 對(duì)象 src 即可。
function dataUrl2Image(dataUrl, callback) { var image = new Image(); image.onload = function() { callback(image); }; image.src = dataUrl;}將 data URL 字符串轉(zhuǎn)化為 Blob 對(duì)象。主要思路是：先將 data URL 數(shù)據(jù)（data） 部分提取出來，用 atob 對(duì)經(jīng)過 base64 編碼的字符串進(jìn)行解碼，再轉(zhuǎn)化成 Unicode 編碼，存儲(chǔ)在Uint8Array（8位無符號(hào)整型數(shù)組，每個(gè)元素是一個(gè)字節(jié)） 類型數(shù)組，最終轉(zhuǎn)化成 Blob 對(duì)象。
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 對(duì)象，用以展示 canvas 上的圖片；這個(gè)圖片文件可以被緩存或保存到本地，由用戶代理端自行決定。第二個(gè)參數(shù)指定圖片格式，如不特別指明，圖片的類型默認(rèn)為 image/png，分辨率為 96dpi。第三個(gè)參數(shù)用于針對(duì)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 對(duì)象轉(zhuǎn)化成 data URL 數(shù)據(jù)，由于 FileReader 的實(shí)例 readAsDataURL 方法不僅支持讀取文件，還支持讀取 Blob 對(duì)象數(shù)據(jù)，這里復(fù)用上面 file2DataUrl 方法即可：
function blob2DataUrl(blob, callback) { file2DataUrl(blob, callback);}將 Blob 對(duì)象轉(zhuǎn)化成 Image 對(duì)象，可通過 URL 對(duì)象引用文件，也支持引用 Blob 這樣的類文件對(duì)象，同樣，這里復(fù)用上面 file2Image 方法即可：
function blob2Image(blob, callback) { file2Image(blob, callback);}上傳圖片（已壓縮），可以使用 FormData 傳入文件對(duì)象，通過 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)，將它們封裝在一個(gè)公用對(duì)象 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('請(qǐng)上傳圖片文件!'); 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)這個(gè)簡易圖片壓縮方法調(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);如果看到這里的客官不嫌棄這個(gè) demo 太簡單可以戳這里試試水。如果你有足夠的耐心多傳幾種類型圖片就會(huì)發(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;}輸出圖片的尺寸確定了，接下來就是按這個(gè)尺寸創(chuàng)建一個(gè) 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í)反而會(huì)造成自身質(zhì)量變得更大。
因?yàn)槲覀冊(cè)凇熬唧w實(shí)現(xiàn)”中兩個(gè)有關(guān)壓縮關(guān)鍵 API：
均未對(duì) png 格式圖片有壓縮效果。
有個(gè)折衷的方案，我們可以設(shè)置一個(gè)閾值，如果 png 圖片的質(zhì)量小于這個(gè)值，就還是壓縮輸出 png 格式，這樣最差的輸出結(jié)果不至于質(zhì)量太大，在此基礎(chǔ)上，如果壓縮后圖片大小 “不減反增”，我們就兜底處理輸出源圖片給用戶。當(dāng)圖片質(zhì)量大于某個(gè)值時(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)象；
由于各大瀏覽器對(duì) Canvas 最大尺寸支持不同
如果圖片尺寸過大，在創(chuàng)建同尺寸畫布，再畫上圖片，就會(huì)出現(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" /> 上傳本地圖片到圖片被壓縮整個(gè)過程，也覆蓋到了在實(shí)際使用中還存在的一些意外情況，提供了相應(yīng)的解決方案。將改進(jìn)版圖片壓縮整理成插件，已上傳 npm ，可通過 npm install js-image-compressor -D 安裝使用，可以從 github 下載。整理匆忙，如有問題歡迎大家指正，完～
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
