js 图片压缩

代码如下：

compressImage(file) {
      // 参数file,是通过input 选择本地文件获取的
      return new Promise((resolve, reject) => {
        const { type, name } = file.file
        let img = new Image()
        // 创建一个reader实例
        let reader = new FileReader()

        // 读取拿到的文件
        reader.readAsDataURL(file.file)
        reader.onload = function(e) {

          // 文件加载成功后去转成Img对象，为了拿到图片的原始宽高
          img.src = e.target.result
          img.onload = function() {
            // 创建画布canvas
            let canvas = document.createElement('canvas')
            let content = canvas.getContext('2d')

            // 设置画布的宽高
            canvas.width = img.width  // 需要压缩到的图片宽度
            canvas.height = img.width * (img.height / img.width)

            // 将图片画在画布上
            content.drawImage(img, 0, 0, canvas.width, canvas.height)

            //画布转成blob格式的图片
            canvas.toBlob(function(blob) {
              // blob 格式的图片 转成file对象，这里主要看接口支不支持blob格式的文件上传，如果支持就没有必要转
              let file = new File([blob], name, { type: type })
              resolve({type: type, compressFile: file})
            }, `image/${type.split('/')[1]}`, 0.7)  // 0.7 是文件压缩程度
          }
        }
      })
    },

有问题可以评论哦