image图片压缩 compress.js ，超过大小则压缩 不超过大小限制则不压缩

引入 import * as ImgCompress from '@/utils/canvas/compress' 这是我自己的 utils工具类目录，自己改成自己压缩js所在的文件夹目录；

demo 示例（样式之类的 不贴了 自己整自己的）：

使用：

 // 压缩判断
     PreviewImage: function(e) {
        const that = this
        console.log('e', e, 'file', e.target.files[0])
        const newFile = e.target.files[0]
        const imgName = e.target.files[0].name
        const check_file = that.beforeAvatarUpload(newFile)
        let imgBase = ''
        if (check_file) {
          const reader = new FileReader()
          if (newFile.size / 1024 / 1024 > 2) {
            console.log('压缩')
            ImgCompress.photoCompress(newFile, { quality: 0.2 }, function(base64Codes) {
              const blob = Utils.convertBase64UrlToBlob(base64Codes)
              const { lastModified, type } = newFile
              const compress_file = new File([blob], imgName, { type: type, lastModified: lastModified })
              imgBase = base64Codes
              // that.unpload(compress_file, imgName, imgBase) // 上传file
            })
          } else {
            // console.log('不压缩的', newFile)
            reader.readAsDataURL(newFile) // 调用reader.readAsDataURL()方法，把图片转成base64
            reader.addEventListener('load', res => {
              imgBase = res.srcElement.result
              // that.unpload(newFile, imgName, imgBase) // 上传file
            }, false)
          }
        }
      },
      beforeAvatarUpload(file) {
        if (!(file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg')) {
          //移动端mint-ui 提示框组件toast 
          Toast({
            message: '请上传 jpg/jpeg/png 格式的图片!',
            duration: 2000
          })
          return
        }
        // const isLt2M = file.size / 1024 / 1024 < 5
        // if (!isLt2M) {
        //   Toast({
        //     message: '图片大小不能超过 5MB!',
        //     duration: 2000
        //   })
        //   return
        // }
        return true
      }

压缩代码 使用canvas.getContext('2d') 原理进行压缩 ，compress.js :

export function photoCompress(file, w, objDiv) {
  var ready = new FileReader()
  /* 开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
  ready.readAsDataURL(file) // 调用reader.readAsDataURL()方法，把图片转成base64
  ready.onload = function() {
    var re = this.result
    canvasDataURL(re, w, objDiv)
  }
}

function canvasDataURL(path, obj, callback) {
  console.log('obj', obj)
  var img = new Image()
  img.src = path
  img.onload = function() {
    var that = this
    // 默认按比例压缩
    let w = that.width
    let h = that.height
    const scale = w / h
    w = obj.width || w
    h = obj.height || (w / scale)
    var quality = 0.6 // 默认图片质量为0.7
    // 生成canvas
    var canvas = document.createElement('canvas')
    var ctx = canvas.getContext('2d')
    // 创建属性节点
    var anw = document.createAttribute('width')
    anw.nodeValue = w
    var anh = document.createAttribute('height')
    anh.nodeValue = h
    canvas.setAttributeNode(anw)
    canvas.setAttributeNode(anh)
    ctx.drawImage(that, 0, 0, w, h)
    // 图像质量
    if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
      quality = obj.quality
    }
    // quality值越小，所绘制出的图像越模糊
    var base64 = canvas.toDataURL('image/jpeg', quality)
    // 回调函数返回base64的值
    callback(base64)
  }
}
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
export function convertBase64UrlToBlob(urlData) {
  const arr = urlData.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: mime })
}