js上傳圖片,利用canvas實(shí)現(xiàn)圖片壓縮

kaka 發(fā)布于2019-08-23 16:27 / 3556人閱讀

摘要：最近項(xiàng)目中的一個(gè)基礎(chǔ)功能手機(jī)上傳圖片技術(shù)棧利用進(jìn)行壓縮這個(gè)應(yīng)該都比較熟悉利用獲取照片旋轉(zhuǎn)角度屬性，因?yàn)橛行┦謾C(jī)機(jī)型會(huì)因?yàn)榕恼諘r(shí)手機(jī)的方向使拍的照片帶一個(gè)旋轉(zhuǎn)角度的屬性核心代碼照片角度屬性創(chuàng)建臨時(shí)畫布等比壓縮旋轉(zhuǎn)度旋轉(zhuǎn)度旋轉(zhuǎn)

最近項(xiàng)目中的一個(gè)基礎(chǔ)功能-----手機(jī)上傳圖片
技術(shù)棧：
1、利用canvas進(jìn)行壓縮（這個(gè)應(yīng)該都比較熟悉）
2、利用exif-js獲取照片旋轉(zhuǎn)角度屬性，因?yàn)橛行┦謾C(jī)機(jī)型會(huì)因?yàn)榕恼諘r(shí)手機(jī)的方向使拍的照片帶一個(gè)旋轉(zhuǎn)角度的屬性

核心代碼：

var _orientation; //照片角度屬性
EXIF.getData(fileInput, function () {
    _orientation = EXIF.getTag(fileInput, "Orientation");
});
let reader = new FileReader();
reader.readAsDataURL(fileInput);
reader.onload = function (e) {
    var image = new Image();
    image.src = e.target.result;
    image.onload = function () {
      var canvas = document.createElement("canvas"); //創(chuàng)建臨時(shí)畫布
      var _width = this.width, _height = this.height, _ratio = _height / _width;
      //等比壓縮
      if (this.width > 800) {
        _width = 800;
        _height = 800 * _ratio;
      }    
      canvas.width = _width;
      canvas.height = _height;
      var ctx = canvas.getContext("2d");
      switch (_orientation) {
        case 6:     // 旋轉(zhuǎn)90度
          canvas.width = _height;
          canvas.height = _width;
          ctx.rotate(Math.PI / 2);
          ctx.drawImage(this, 0, -_height, _width, _height);
          break;
        case 3:     // 旋轉(zhuǎn)180度
          ctx.rotate(Math.PI);
          ctx.drawImage(this, -_width, -_height, _width, _height);
          break;
        case 8:     // 旋轉(zhuǎn)-90度
          canvas.width = _height;
          canvas.height = _width;
          ctx.rotate(3 * Math.PI / 2);
          ctx.drawImage(this, -_width, 0, _width, _height);
          break;
        default:
          ctx.drawImage(this, 0, 0, _width, _height);
      }
      //需要上傳的數(shù)據(jù)對(duì)象
      const resultBase =dataURItoBlob(canvas.toDataURL("image/jpeg", 0.9));
      //...省略進(jìn)行上傳操作代碼
    };
}
//將dataURI轉(zhuǎn)成Blob用于上傳
dataURItoBlob:function(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(",")[0].indexOf("base64") >= 0)
      byteString = atob(dataURI.split(",")[1]);
    else
      byteString = unescape(dataURI.split(",")[1]);

    // separate out the mime component
    var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {type:mimeString});
  }