vue element ui 上传图片压缩

1：将压缩js封装起来

​
/** 图片压缩，默认同比例压缩
 *  @param {Object} fileObj
 *  图片对象
 *  回调函数有一个参数，base64的字符串数据
 */
 export function compress(fileObj, callback) {
    try {
      const image = new Image()
      image.src = URL.createObjectURL(fileObj)
      image.onload = function() {
        const that = this
        // 默认按比例压缩
        let w = that.width
        let h = that.height
        const scale = w / h
        w = fileObj.width || w
        h = fileObj.height || (w / scale)
        let quality = 0.7 // 默认图片质量为0.7
        // 生成canvas
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        // 创建属性节点
        const anw = document.createAttribute('width')
        anw.nodeValue = w
        const anh = document.createAttribute('height')
        anh.nodeValue = h
        canvas.setAttributeNode(anw)
        canvas.setAttributeNode(anh)
        ctx.drawImage(that, 0, 0, w, h)
        // 图像质量
        if (fileObj.quality && fileObj.quality <= 1 && fileObj.quality > 0) {
          quality = fileObj.quality
        }
        // quality值越小，所绘制出的图像越模糊
        const data = canvas.toDataURL('image/jpeg', quality)
        // 压缩完成执行回调
        const newFile = convertBase64UrlToBlob(data,fileObj.name)
        callback(newFile)
      }
    } catch (e) {
      console.log('压缩失败!')
    }
  }
  function convertBase64UrlToBlob(urlData,filename) {
    const bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte
    // 处理异常,将ascii码小于0的转换为大于0
    const ab = new ArrayBuffer(bytes.length)
    const ia = new Uint8Array(ab)
    for (let i = 0; i < bytes.length; i++) {
      ia[i] = bytes.charCodeAt(i)
    }
    return new File([ab],filename,{ type: 'image/png' })
  }

​

注意：这里看需要是Blob， File格式还是Base64格式(我这里使用的是File)

convertBase64UrlToBlob这个方法中要接收filename，例如:

return new File([ab],filename,{ type: 'image/png' })

如果使用Blob，convertBase64UrlToBlob方法中就不需要传filename，例如：        

return new Blob([ab],{ type: 'image/png' })

 (1):Blob格式传输出

(2):File格式输出

(3): Base64格式

 2:将压缩文件引入页面中使用

import { compress } from 'public/config/img-compression'

3:方法中使用压缩

    // 上传图片
    uploadSignedFile (file,fileList) {
      const isLt2M = file.size / 1024 / 1024 < 2 // 上传头像图片大小不能超过 2MB
        let _this=this
         //超过2M进行压缩    
        if (!isLt2M) {
          let dialogImageUrl = URL.createObjectURL(file.raw)
          compress(file.raw, function(val) {
            // console.log(val) 这里可以输出压缩后的大小以及其他参数
            _this.ruleForm.diaLogFormImg.push(val)
          })
        }else{
          _this.ruleForm.diaLogFormImg.push(file.raw)
        }
    },

举例：图片原本大小 

 压缩后大小