使用canvas壓縮圖片大小

【目錄】

• 問題來源
• 思路分析
• 前提的函數
  • 將file文件轉化爲base64
  • 將base64轉化爲文件流
• 壓縮方法
• 方法使用
• 問題總結
  • 圖片壓縮程度
  • 原本想作一個壓縮圖片的遞歸，直到圖片大小符合指望
  • ios拍攝方向問題

問題來源

這個問題，源於上傳圖片文件的時候，後臺限制了2MB的大小，but在調起相機拍照的時候分分鐘超過了2MB,爲了避免影響用戶體驗和功能需求，須要前端對大小進行壓縮，而後傳到後臺。

思路分析

找了不少資料，發現只有canvas能夠對圖片進行壓縮處理。

原理大概就是： 一、先將圖片的file文件轉成baseURL 二、建立一個image標籤去接收文件獲取圖片的寬高和比例。 三、建立canvas畫布設置畫布的大小。 四、將圖片繪製到canvas上面。 五、對canvas進行壓縮處理，得到新的baseURL 六、將baseURL轉化迴文件。

前提的函數

將file文件轉化爲base64

/** * @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);
      }
    }
複製代碼

將base64轉化爲文件流

/** * 將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});
 }
複製代碼

壓縮方法

/** * 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,param.quality);
           //將base64轉化成文件流
           var resultFile = dataURLtoFile(newImageData,param.fileName);
           //判斷若是targetSize有限制且壓縮後的圖片大小比目標大小大，就彈出錯誤
           if(param.targetSize != -1 && param.targetSize < resultFile.size){
             console.log("圖片上傳尺寸太大，請從新上傳^_^");
             param.succ(null);
           }else{
             //返回文件流
             param.succ(resultFile);
           }
         }
       }
     });
   }
 }
複製代碼

方法使用

文件的size是按照字節，因此咱們須要把要求的大小轉化成字節。 1字節就是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
        }
     }
  })
});
複製代碼

問題總結

圖片壓縮程度

圖片的壓縮程度不太好肯定，因此能夠進行屢次嘗試，根據需求方的要求進行調整。 改變目標圖片的大小和清晰度均可以改變圖片的壓縮程度。

原本想作一個壓縮圖片的遞歸，直到圖片大小符合指望

後來發現

• 若是目標大小比較小，圖片如何進行壓縮都不能知足條件的時候，會形成循環沒法跳出，浪費資源。
• 若是圖片進行幾回壓縮以後，文件大小不會改變了，有的時候還會增長，奇奇怪怪。 因此就放棄了遞歸。

ios拍攝方向問題

由於ios調起系統相機拍照是逆時針旋轉了90度。 而在我壓縮圖片以後傳到後臺，發現圖片的exif信息的拍攝方向丟失，致使ios上傳的圖片都是逆時針旋轉了90度。這個問題安卓未曾發現。

目前有些懷疑，是base64轉化成file文件的時候，丟失的。 以後驗證後會在這裏進行補充說明。

@version1.0——2019-8-2——建立《使用canvas壓縮圖片大小》

©burning_韻七七