vue图片压缩插件

图片压缩插件

1.安装插件

npm i js-image-compressor

2.引入

import ImageCompressor from 'js-image-compressor'

3.使用

compressionImage (file) {
      return new Promise((resolve, reject) => {
        // eslint-disable-next-line no-new
        new ImageCompressor({
          file: file,
          quality: 0.8,
          maxWidth: 1500,
          maxHeight: 1500,
          redressOrientation: false,

          // 压缩前回调
          beforeCompress: function (result) {
            console.log('压缩之前图片尺寸大小: ', result.size)
            console.log('mime 类型: ', result.type)
          },

          success: function (result) {
            console.log('压缩之后图片尺寸大小: ', result.size)
            console.log('mime 类型: ', result.type)
            console.log('实际压缩率： ', ((file.size - result.size) / file.size * 100).toFixed(2) + '%')
            resolve(result)
          },
          error (e) {
            reject(e)
          }
        })
      })
    }

4.使用

// 图片压缩
        let blobO = this.$refs.inputList.files[0]
        this.compressionImage(blobO).then((blob) => {
            
        })