使用canvas壓縮圖片大小的方法示例

2024-08-26 00:21:38

字體：大中小

供稿：網(wǎng)友

問(wèn)題來(lái)源

這個(gè)問(wèn)題，源于上傳圖片文件的時(shí)候，后臺(tái)限制了2MB的大小，but在調(diào)起相機(jī)拍照的時(shí)候分分鐘超過(guò)了2MB,為了不影響用戶體驗(yàn)和功能需求，需要前端對(duì)大小進(jìn)行壓縮，然后傳到后臺(tái)。

思路分析

找了很多資料，發(fā)現(xiàn)只有canvas可以對(duì)圖片進(jìn)行壓縮處理。

原理大概就是： 1、先將圖片的file文件轉(zhuǎn)成baseURL 2、創(chuàng)建一個(gè)image標(biāo)簽去接收文件獲取圖片的寬高和比例。 3、創(chuàng)建canvas畫(huà)布設(shè)置畫(huà)布的大小。 4、將圖片繪制到canvas上面。 5、對(duì)canvas進(jìn)行壓縮處理，獲得新的baseURL 6、將baseURL轉(zhuǎn)化回文件。

前提的函數(shù)

將file文件轉(zhuǎn)化為base64

/*** @param {二進(jìn)制文件流} file * @param {回調(diào)函數(shù)，返回base64} fn */function changeFileToBaseURL(file,fn){  // 創(chuàng)建讀取文件對(duì)象      var fileReader = new FileReader();      //如果file沒(méi)定義返回null      if(file == undefined) return fn(null);      // 讀取file文件,得到的結(jié)果為base64位      fileReader.readAsDataURL(file);      fileReader.onload = function(){        // 把讀取到的base64        var imgBase64Data = this.result;        fn(imgBase64Data);      }    }

將base64轉(zhuǎn)化為文件流

/** * 將base64轉(zhuǎn)換為文件 * @param {baseURL} dataurl  * @param {文件名稱} filename  * @return {文件二進(jìn)制流}*/function dataURLtoFile(dataurl, filename) {    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);    while(n--){        u8arr[n] = bstr.charCodeAt(n);    }    return new File([u8arr], filename, {type:mime}); }

壓縮方法

/*** canvas壓縮圖片* @param {參數(shù)obj} param * @param {文件二進(jìn)制流} param.file 必傳* @param {目標(biāo)壓縮大小} param.targetSize 不傳初始賦值-1* @param {輸出圖片寬度} param.width 不傳初始賦值-1，等比縮放不用傳高度* @param {輸出圖片名稱} param.fileName 不傳初始賦值image* @param {壓縮圖片程度} param.quality 不傳初始賦值0.92。值范圍0~1* @param {回調(diào)函數(shù)} param.succ 必傳*/function pressImg(param){  //如果沒(méi)有回調(diào)函數(shù)就不執(zhí)行  if(param && param.succ){     //如果file沒(méi)定義返回null     if(param.file == undefined) return param.succ(null);     //給參數(shù)附初始值     param.targetSize = param.hasOwnProperty("targetSize") ? param.targetSize : -1;     param.width = param.hasOwnProperty("width") ? param.width : -1;     param.fileName = param.hasOwnProperty("fileName") ? param.fileName: "image";     param.quality = param.hasOwnProperty("quality") ? param.quality : 0.92;     var _this = this;     // 得到文件類型     var fileType = param.file.type;     // console.log(fileType) //image/jpeg     if(fileType.indexOf("image") == -1){       console.log('請(qǐng)選擇圖片文件^_^');       return param.succ(null);     }     //如果當(dāng)前size比目標(biāo)size小，直接輸出     var size = param.file.size;     if(param.targetSize > size){       return param.succ(param.file);     }     // 讀取file文件,得到的結(jié)果為base64位     changeFileToBaseURL(param.file,function(base64){       if(base64){         var image = new Image();         image.src = base64;         image.onload = function(){           // 獲得長(zhǎng)寬比例           var scale = this.width / this.height;           // console.log(scale);           //創(chuàng)建一個(gè)canvas           var canvas = document.createElement('canvas');           //獲取上下文           var context = canvas.getContext('2d');           //獲取壓縮后的圖片寬度,如果width為-1，默認(rèn)原圖寬度           canvas.width = param.width == -1 ? this.width : param.width;           //獲取壓縮后的圖片高度,如果width為-1，默認(rèn)原圖高度           canvas.height = param.width == -1 ? this.height : parseInt(param.width / scale);           //把圖片繪制到canvas上面           context.drawImage(image, 0, 0, canvas.width, canvas.height);           //壓縮圖片，獲取到新的base64Url           var newImageData = canvas.toDataURL(fileType,param.quality);           //將base64轉(zhuǎn)化成文件流           var resultFile = dataURLtoFile(newImageData,param.fileName);           //判斷如果targetSize有限制且壓縮后的圖片大小比目標(biāo)大小大，就彈出錯(cuò)誤           if(param.targetSize != -1 && param.targetSize < resultFile.size){             console.log("圖片上傳尺寸太大，請(qǐng)重新上傳^_^");             param.succ(null);           }else{             //返回文件流             param.succ(resultFile);           }         }       }     });   } }

方法使用

文件的size是按照字節(jié)，所以我們需要把要求的大小轉(zhuǎn)化成字節(jié)。 1字節(jié)就是1byte就是1B，1KB = 1024B，1MB = 1024 * 1024B

<input type="file" id="fileImg" class="fileImg"/>

// 圖片文件上傳獲取url$("#fileImg").on('change',function(){   pressImg({     file:this.files[0],     targetSize:2 * 1024 * 1024,     quality:0.5,     width:600,     succ:function(resultFile){         //如果不是null就是壓縮成功         if(resultFile){           //TODO        }     }  })});

問(wèn)題總結(jié)

圖片壓縮程度

圖片的壓縮程度不太好確定，所以可以進(jìn)行多次嘗試，根據(jù)需求方的要求進(jìn)行調(diào)整。改變目標(biāo)圖片的大小和清晰度都可以改變圖片的壓縮程度。

本來(lái)想做一個(gè)壓縮圖片的遞歸，直到圖片大小符合期望

后來(lái)發(fā)現(xiàn)

如果目標(biāo)大小比較小，圖片如何進(jìn)行壓縮都不能滿足條件的時(shí)候，會(huì)造成循環(huán)無(wú)法跳出，浪費(fèi)資源。
如果圖片進(jìn)行幾次壓縮之后，文件大小不會(huì)改變了，有的時(shí)候還會(huì)增加，奇奇怪怪。所以就放棄了遞歸。

ios拍攝方向問(wèn)題

因?yàn)閕os調(diào)起系統(tǒng)相機(jī)拍照是逆時(shí)針旋轉(zhuǎn)了90度。而在我壓縮圖片之后傳到后臺(tái)，發(fā)現(xiàn)圖片的exif信息的拍攝方向丟失，導(dǎo)致ios上傳的圖片都是逆時(shí)針旋轉(zhuǎn)了90度。這個(gè)問(wèn)題安卓不曾發(fā)現(xiàn)。