H5图片上传并压缩

527 阅读1分钟

1、将无图片类型的图片base64码转为文件;

    // 上传图片
    updateImg(base64Data){
      //base64Data这个为不包括[data:image/jpeg;base64,]的base64串
      let that = this
      // 将base64解码
      let bytes = window.atob(base64Data);
      //let bytes = base64;
      let bytesCode = new ArrayBuffer(bytes.length);
      // 转换为类型化数组
      let byteArray = new Uint8Array(bytesCode);
      // 将base64转换为ascii码
      for (let i = 0; i < bytes.length; i++) {
        byteArray[i] = bytes.charCodeAt(i);
      }
      // 生成Blob对象(文件对象)
      let bolbObj = new Blob([bytesCode], { type: 'image/jpg' });
      let reader = new FileReader(); // 这个方法读取文件的bolb对象
      //将图片转成base64格式
      reader.readAsDataURL(bolbObj);
      reader.onloadend = function() {
        let result = this.result;
        let img = new Image();
        img.src = result;
        console.log("********未压缩前的图片大小********");
        console.log(result.length / 1024);
        if(result.length/1024 > 50){
          img.onload = function() {
          //0.6为压缩的程度,数值越小,压缩的文件越小,图片也会越模糊
            let data = that.compress(img, 0.7);
            that.uploadIdCardImg(data);//上传图片接口
          }
        }else{
          let data = result
          that.uploadIdCardImg(data);//上传图片接口
        }
      };
    },

2、压缩图片

// 压缩图片
    compress(img, size) {
      // 创建canvas
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
      let initSize = img.src.length
      //设置图片大小
      let width = 1024
      let height = width * (img.height / img.width)
      canvas.width = width;
      canvas.height = height;
      // 铺底色
      ctx.fillStyle = '#fff'
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      ctx.drawImage(img, 0, 0, width, height)
      //进行最小压缩
      let ndata = canvas.toDataURL('image/jpeg', size)
      console.log('*******压缩后的图片大小*******')
      console.log(ndata.length / 1024)
      return ndata
    },