js 图片压缩 尺寸不变 压缩质量 input type=file 文件压缩

input type=file 文件压缩
js 图片压缩 尺寸不变 压缩质量

<input type=“file” accept=“image/*” name=“files” @change=“imgMsgListDangerImgs”/>

imgMsgListDangerImgs(data) {
this.imageCompression(data.target.files[0], ‘1’)
},

	//a 为flag位 可删   data 为input 获取的二进制文件
  imageCompression: async function (data, a) {
    let self = this;
    let Orientation;
    let ndata;
    debugger
    if (data.size <= 1 * 1024 * 1024) {
      //判断图片是否大于1M,是就直接上传
      ndata = data;
      self.postImg(ndata, a);
    } else {
      //反之压缩图片
      let reader = new FileReader();
      // 将图片2将转成 base64 格式
      reader.readAsDataURL(data);
      console.log(reader)
      // 读取成功后的回调
      reader.onloadend = function () {
        let result = this.result;
        let img = new Image();
        img.src = result;
        img.onload = function () {
          let data2 = self.compress(img, Orientation);
          self.headerImage = data2;
          ndata = self.compress(img, Orientation);

          //BASE64转图片
          var arr = ndata.split(','), mime = arr[0].match(/:(.*?);/)[1],
                  bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          ndata = new File([u8arr], data.name, {type: mime})
          // return ndata
          self.postImg(ndata, a);
        }
      }
    }
  },
  compress(img, Orientation) {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext('2d');
    //瓦片canvas
    let tCanvas = document.createElement("canvas");
    let tctx = tCanvas.getContext("2d");
    let initSize = img.src.length;
    let width = img.width;
    let height = img.height;
    //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
    let ratio;
    if ((ratio = width * height / 4000000) > 1) {
      console.log("大于400万像素")
      ratio = Math.sqrt(ratio);
      width /= ratio;
      height /= ratio;
    } else {
      ratio = 1;
    }
    canvas.width = width;
    canvas.height = height;
    // 		铺底色
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    //如果图片像素大于100万则使用瓦片绘制
    let count;
    if ((count = width * height / 1000000) > 1) {
      console.log("超过100W像素");
      count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
      //            计算每块瓦片的宽和高
      let nw = ~~(width / count);
      let nh = ~~(height / count);
      tCanvas.width = nw;
      tCanvas.height = nh;
      for (let i = 0; i < count; i++) {
        for (let j = 0; j < count; j++) {
          tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
          ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
        }
      }
    } else {
      ctx.drawImage(img, 0, 0, width, height);
    }
    //修复ios上传图片的时候 被旋转的问题
    if (Orientation != "" && Orientation != 1) {
      switch (Orientation) {
        case 6://需要顺时针（向左）90度旋转
          this.rotateImg(img, 'left', canvas);
          break;
        case 8://需要逆时针（向右）90度旋转
          this.rotateImg(img, 'right', canvas);
          break;
        case 3://需要180度旋转
          this.rotateImg(img, 'right', canvas);//转两次
          this.rotateImg(img, 'right', canvas);
          break;
      }
    }
    //进行压缩
    let ndata = canvas.toDataURL('image/jpeg', 0.1);

    console.log('压缩前：' + initSize);
    console.log('压缩后：' + ndata.length);
    console.log("ndata:" + ndata)

    console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
    tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
    return ndata;
  },
  async postImg(ndata, a) {
    let mine = this;
    let param = new FormData(); //创建form对象
    param.append('file', ndata); //通过append向form对象添加数据
    let config = {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
    try {
      // const response = await FileUpload(param, config)  //此处写接口对应的vue方法
      const res = await axios.post(FILE_URL, param, config);
      //营业执照
  
      if (a == '0') {
        mine.businesslicense.push({
          id: new Date().getTime(),
          src: res.data,
          type: "新",
        });
        mine.tshopVo.shopCheckInfo.businesslicense = 		JSON.stringify(mine.businesslicense);
      }

    } catch (error) {
      console.log(error)
    }
  },
},

本文地址：https://blog.csdn.net/weixin_42752532/article/details/107936090