Vue图片压缩上传

Posted 龖龖龖

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue图片压缩上传相关的知识,希望对你有一定的参考价值。

一、图片压缩

图片压缩工具类最大高度和最大宽度都为 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);
          
        );
 
      ,

以上是关于Vue图片压缩上传的主要内容,如果未能解决你的问题,请参考以下文章

Vue图片压缩上传

Android学习之图片压缩,压缩程度高且失真度小

我的论坛上传图片为啥压缩太厉害?

前端图片压缩上传(纯js的质量压缩,非大小压缩)

前端图片压缩上传(纯js的质量压缩,非长宽压缩)

thinkphp上传图片自动压缩问题