本文作者：Marydon

原文鏈接：https://www.cnblogs.com/Marydon20170307/p/11486511.html

1.情景展示

如上圖所示，點(diǎn)擊上傳圖片按鈕，調(diào)用手機(jī)攝像頭拍照功能。

<input onchange='javascript:imgFun.uploadPicture();' type='file' name='file' accept='image/*' capture='camera' style='display: none;'>

我們知道現(xiàn)在，手機(jī)拍照在10MB左右，體積太大，在上傳到服務(wù)器前，能不能只縮小圖片的體積，而不改變圖片尺寸？

2.原因分析

通過canvas實(shí)現(xiàn)對(duì)圖片的重新繪制。

代碼展示：

/** * 圖片壓縮 * @explain 借助canvas對(duì)圖片進(jìn)行重繪（canvas2DataURL） * @param base64Url base64格式的圖片字符串 * @param imgAttr 重繪圖片寬度、高度、質(zhì)量等屬性的設(shè)置 * @param callback 該函數(shù)執(zhí)行完畢后，要執(zhí)行的回調(diào)函數(shù) * @returns */function photoCompress (base64Url, imgAttr, callback){ var img = new Image(); img.src = base64Url; img.onload = function(){ var that = this; // 默認(rèn)按比例壓縮 var w = that.width, h = that.height, // 寬高比例 scale = w / h; w = imgAttr.width || w; h = imgAttr.height || (w / scale); // 默認(rèn)圖片質(zhì)量為0.7 var quality = 0.7; //生成canvas var canvas = document.createElement(’canvas’); var ctx = canvas.getContext(’2d’); // 創(chuàng)建屬性節(jié)點(diǎn) var anw = document.createAttribute('width'); anw.nodeValue = w; canvas.setAttributeNode(anw); var anh = document.createAttribute('height'); anh.nodeValue = h; canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 圖像質(zhì)量（0-1） if(imgAttr.quality && imgAttr.quality <= 1 && imgAttr.quality > 0){ quality = imgAttr.quality; } // 重繪后的圖片類型 var imgType = imgAttr.type || ’image/jpeg’; // quality值越小，所繪制出的圖像越模糊 var base64 = canvas.toDataURL(imgType, quality); // 回調(diào)函數(shù)返回base64的值 callback(base64); };}

可自定義設(shè)置圖片質(zhì)量，圖片的寬高（通過imgAttr設(shè)置）。

3.完整示例

// js 獲取文件對(duì)象var fileObj = document.getElementById('file').files[0];if (null == fileObj) { alert('圖像上傳失敗，請(qǐng)重試！');}// 文件讀取對(duì)象var reader = new FileReader();// 圖片轉(zhuǎn)base64（Blob對(duì)象或File對(duì)象）reader.readAsDataURL(fileObj);// 圖片大小<=1MB，size的單位：B（1Mb=1B*1024*1024）if(fileObj.size/1024 <= 1024) { reader.onload = function(e) { // 獲取對(duì)應(yīng)的base64 var imgBase64 = e.target.result; // 將圖片的base64碼傳給后臺(tái) // 調(diào)用騰訊接口 $.post(baseUrl + '/weixin/facein/upImg2.do',{imgBase64:imgBase64},function(resData){ // TODO 對(duì)返回的接口數(shù)據(jù)進(jìn)行自動(dòng)填充處理 }); };} else { // 讀取完畢 reader.onload = function(){ // 圖片轉(zhuǎn)換成為base64Url var fileBase64 = this.result; // 圖片參數(shù) var imgAttr = {quality : 0.2, type : ’img/jpeg’}; // 回調(diào)函數(shù) var callBack = function (base64Codes) { // 圖片比較 // 調(diào)用騰訊接口 }; // 壓縮圖片 photoCompress(fileBase64,imgAttr,callBack); };}

說明：

前端對(duì)圖片進(jìn)行重繪，對(duì)瀏覽器有一定的要求，我測試的時(shí)候在電腦端沒有問題，但是，在微信上使用時(shí)，就會(huì)很難受了，會(huì)將微信的qq瀏覽器內(nèi)核搞垮，根本無法使用。

不得以，放棄了在前端進(jìn)行壓縮的想法，轉(zhuǎn)而直接將圖片以流的形式提交至后臺(tái)，由java負(fù)責(zé)圖片壓縮處理。

補(bǔ)充：

圖片優(yōu)化方面可以考慮從以下幾個(gè)方面著手：減小分辨率 >壓縮圖片>chrome使用webp格式

寫在最后

哪位大佬如若發(fā)現(xiàn)文章存在紕漏之處或需要補(bǔ)充更多內(nèi)容，歡迎留言！！！

以上就是js 壓縮圖片的示例（只縮小體積，不更改圖片尺寸）的詳細(xì)內(nèi)容，更多關(guān)于js 壓縮圖片的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！