本文作者：Marydon

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

1.情景展示

如上圖所示，點擊上傳圖片按鈕，調用手機攝像頭拍照功能。

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

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

2.原因分析

通過canvas實現對圖片的重新繪制。

代碼展示：

/** * 圖片壓縮 * @explain 借助canvas對圖片進行重繪（canvas2DataURL） * @param base64Url base64格式的圖片字符串 * @param imgAttr 重繪圖片寬度、高度、質量等屬性的設置 * @param callback 該函數執行完畢后，要執行的回調函數 * @returns */function photoCompress (base64Url, imgAttr, callback){ var img = new Image(); img.src = base64Url; img.onload = function(){ var that = this; // 默認按比例壓縮 var w = that.width, h = that.height, // 寬高比例 scale = w / h; w = imgAttr.width || w; h = imgAttr.height || (w / scale); // 默認圖片質量為0.7 var quality = 0.7; //生成canvas var canvas = document.createElement(’canvas’); var ctx = canvas.getContext(’2d’); // 創建屬性節點 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); // 圖像質量（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); // 回調函數返回base64的值 callback(base64); };}

可自定義設置圖片質量，圖片的寬高（通過imgAttr設置）。

3.完整示例

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

說明：

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

不得以，放棄了在前端進行壓縮的想法，轉而直接將圖片以流的形式提交至后臺，由java負責圖片壓縮處理。

補充：

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

寫在最后

哪位大佬如若發現文章存在紕漏之處或需要補充更多內容，歡迎留言?。?！

以上就是js 壓縮圖片的示例（只縮小體積，不更改圖片尺寸）的詳細內容，更多關于js 壓縮圖片的資料請關注好吧啦網其它相關文章！