------------恢復內容開始------------
由於各種大大小小的原因，自己最近經歷了一些面試，其中有一個面試題是這樣的，使用canvas怎樣壓縮圖片大小
這道題給我問蒙了，因為我沒用過canvas壓縮圖片
回去查資料，發現手機端在上傳圖片的時候，調起相機拍照的時候超過2m了，所以用到canvas壓縮，優化用戶體驗
解決方法：
1. 將圖片的file文件轉成baseURL
2. 創建一個image表情去接受文件獲取圖片的寬高和比例。
3. 創建canvas畫布設置畫布的大小。
4. 將圖片繪制到canvas上面。
5. 對canvas進行壓縮處理，獲取新的baseURL
6. 將baseURL轉化回文件
1.
/** * @param {二進制文件流} file * @param {回調函數，返回base64} fn */ function changeFileToBaseURL(file,fn){ // 創建讀取文件對象 var fileReader = new FileReader(); //如果file沒定義返回null if(file == undefined) return fn(null); // 讀取file文件,得到的結果為base64位 fileReader.readAsDataURL(file); fileReader.onload = function(){ // 把讀取到的base64 var imgBase64Data = this.result; fn(imgBase64Data); } }
2./** * 將base64轉換為文件 * @param {baseURL} dataurl * @param {文件名稱} filename * @return {文件二進制流} */ 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}); }
3./** * canvas壓縮圖片 * @param {參數obj} param * @param {文件二進制流} param.file 必傳 * @param {目標壓縮大小} param.targetSize 不傳初始賦值-1 * @param {輸出圖片寬度} param.width 不傳初始賦值-1，等比縮放不用傳高度 * @param {輸出圖片名稱} param.fileName 不傳初始賦值image * @param {壓縮圖片程度} param.quality 不傳初始賦值0.92。值范圍0~1 * @param {回調函數} param.succ 必傳 */ function pressImg(param){ //如果沒有回調函數就不執行 if(param && param.succ){ //如果file沒定義返回null if(param.file == undefined) return param.succ(null); //給參數附初始值 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('請選擇圖片文件^_^'); return param.succ(null); } //如果當前size比目標size小，直接輸出 var size = param.file.size; if(param.targetSize > size){ return param.succ(param.file); } // 讀取file文件,得到的結果為base64位 changeFileToBaseURL(param.file,function(base64){ if(base64){ var image = new Image(); image.src = base64; image.onload = function(){ // 獲得長寬比例 var scale = this.width / this.height; // console.log(scale); //創建一個canvas var canvas = document.createElement('canvas'); //獲取上下文 var context = canvas.getContext('2d'); //獲取壓縮后的圖片寬度,如果width為-1，默認原圖寬度 canvas.width = param.width == -1 ? this.width : param.width; //獲取壓縮后的圖片高度,如果width為-1，默認原圖高度 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