Vue图片压缩上传

Posted 2021-09-18 龖龖龖

一、图片压缩

图片压缩工具类最大高度和最大宽度都为 500，如果超出大小将等比例缩放。
注意可能出现压缩后比原图更大的情况，在调用的地方自己判断大小并决定上传压缩前或压缩后的图到服务器。

// 将base64转换为blob
 convertBase64UrlToBlob(urlData) {
	 let arr = urlData.split(',')
	 let mime = arr[0].match(/:(.*?);/)[1]
	 let bstr = atob(arr[1])
	 let n = bstr.length
	 let u8arr = new Uint8Array(n)
	 while (n--) {
	  u8arr[n] = bstr.charCodeAt(n)
	 }
	 return new Blob([u8arr], {type: mime})
}

// 压缩图片
compressImage(path) {
 //最大高度
 const maxHeight = 500;
 //最大宽度
 const maxWidth = 500;
 return new Promise((resolve, reject) => {
  let img = new Image();
  img.src = path;
  img.onload = function () {
   const originHeight = img.height;
   const originWidth = img.width;
   let compressedWidth = img.height;
   let compressedHeight = img.width;
   if ((originWidth > maxWidth) && (originHeight > maxHeight)) {
    // 更宽更高，
    if ((originHeight / originWidth) > (maxHeight / maxWidth)) {
     // 更加严重的高窄型，确定最大高，压缩宽度
     compressedHeight = maxHeight
     compressedWidth = maxHeight * (originWidth / originHeight)
    } else {
     //更加严重的矮宽型, 确定最大宽，压缩高度
     compressedWidth = maxWidth
     compressedHeight = maxWidth * (originHeight / originWidth)
    }
   } else if (originWidth > maxWidth && originHeight <= maxHeight) {
    // 更宽，但比较矮，以maxWidth作为基准
    compressedWidth = maxWidth
    compressedHeight = maxWidth * (originHeight / originWidth)
   } else if (originWidth <= maxWidth && originHeight > maxHeight) {
    // 比较窄，但很高，取maxHight为基准
    compressedHeight = maxHeight
    compressedWidth = maxHeight * (originWidth / originHeight)
   } else {
    // 符合宽高限制，不做压缩
   }
   // 生成canvas
   let canvas = document.createElement('canvas');
   let context = canvas.getContext('2d');
   canvas.height = compressedHeight;
   canvas.width = compressedWidth;
   context.clearRect(0, 0, compressedWidth, compressedHeight);
   context.drawImage(img, 0, 0, compressedWidth, compressedHeight);
   let base64 = canvas.toDataURL('image/*', 0.8);
   let blob = convertBase64UrlToBlob(base64);
   // 回调函数返回blob的值。也可根据自己的需求返回base64的值
   resolve(blob)
  }
 })
}

上传

 uploadFiles(param) {
        let _this = this;
        let formData = new FormData();
        formData.append('data', JSON.stringify(param.data));
        // 压缩后上传
        this.compressAvatard(param.file, 1024 * 3, function (res) {
          formData.append("files", res);
          _this.uploadFileRequest(_this.options.url, formData, data => {
            if (data && data.length > 0) {
              _this.$notify({
                title: '成功',
                message: '上传成功',
                type: 'success'
              });
            }
          });
        });
      }
      

图片压缩方法

  //把图片文件作为参数传递到方法中
      compressAvatard(file, kb, callback) {
        let _this = this;
        let raw = file.raw? file.raw: file;
        compress(raw, function (val) {
          // val是Blob类型，转换为file类型
          let newfile = new window.File([val], file.name, {type: raw.type});
          newfile.uid = file.uid;
          // 压缩率过低则停止压缩, 防止死循环
          if ((newfile.size / 1024) > kb && (newfile.size / file.size < 0.9 ) ) {
            console.log("图片过大:" + newfile.size + ',已压缩');
            _this.compressAvatard(newfile, kb, callback);
          } else {
            callback(newfile);
            console.log("压缩后大小:" + newfile.size);
          }
        });
 
      },