vue图片压缩，file/base64/blob/url各种格式转换

一、file格式图片压缩

1、base64转blob
2、blob转file
3、base64转file
4、图片file转Base64编码
5、图片url转Base64编码

 //图片压缩
    compressImg(file) {
      var files
      var fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2)
      var read = new FileReader()
      read.readAsDataURL(file)
      var that = this;
      return new Promise(function(resolve, reject) {
        read.onload = function(e) {
          var img = new Image()
          img.src = e.target.result
          img.onload = function() {
            // 默认按比例压缩
            var w = this.width
            var h = this.height
            // 生成canvas
            var canvas = document.createElement('canvas')
            var ctx = canvas.getContext('2d')
            var base64
            // 创建属性节点
            canvas.setAttribute('width', w)
            canvas.setAttribute('height', h)
            ctx.drawImage(this, 0, 0, w, h)
            if (fileSize < 1) {
              // 如果图片小于一兆 那么不执行压缩操作
              base64 = canvas.toDataURL(file['type'], 1)
            } else if (fileSize > 1 && fileSize < 2) {
              // 如果图片大于1M并且小于2M 那么压缩0.5
              base64 = canvas.toDataURL(file['type'], 0.5)
            } else {
              // 如果图片超过2m 那么压缩0.2
              base64 = canvas.toDataURL(file['type'], 0.2)
            }
            // 回调函数返回file的值（将base64编码转成file）
            // 1.先转为 blob格式  file.content是此文件的base64格式
            var blob =  that.dataURLtoBlob(base64);
            // 拿到文件名
            var fileName = file.name;

            // 2，在转为 file类型
            var file_ys = that.blobToFile(blob,fileName);
            //console.log("file1:",file_ys);
            resolve(file_ys)
          }
        }
      })
    },

1、 base64转blob

dataURLtoBlob(dataurl) {
      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 Blob([u8arr], { type: mime });
    },

2、blob转file

 blobToFile(theBlob, fileName){
      theBlob.lastModifiedDate = new Date();  // 文件最后的修改日期
      theBlob.name = fileName;                // 文件名
      return new File([theBlob], fileName, {type: theBlob.type, lastModified: Date.now()});
    },

3、base64转file

 base64ToFile(urlData, fileName) {
      let arr = urlData.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bytes = atob(arr[1]); // 解码base64
      let n = bytes.length;
      let ia = new Uint8Array(n);
      while (n--) {
        ia[n] = bytes.charCodeAt(n);
      }
      return new File([ia], `${this.imgData.bucketName}.png`, { type: mime });
    },

4、图片file转Base64编码

imageToBase64 (file) {
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        console.log('file 转 base64结果：' + reader.result)
        this.iconBase64 = reader.result
      }
      reader.onerror = function (error) {
        console.log('Error: ', error)
      }
}

5、图片url转Base64编码

getBase64(url, callback) {
      var Img = new Image(),
        dataURL = "";
      Img.src = url + "?v=" + Math.random();
      Img.setAttribute("crossOrigin", "Anonymous");
      Img.onload = function () {
        var canvas = document.createElement("canvas"),
          width = Img.width,
          height = Img.height;
        canvas.width = width;
        canvas.height = height;
        canvas.getContext("2d").drawImage(Img, 0, 0, width, height);
        dataURL = canvas.toDataURL("image/jpeg");
        callback ? callback(dataURL) : null;
      };
    },