js-image-compressor 图片压缩插件

最新推荐文章于 2025-10-24 12:47:19 发布

原创最新推荐文章于 2025-10-24 12:47:19 发布 · 3.6k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

插件专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何通过'npmijs-image-compressor'插件实现JavaScript压缩图片，包括文件导入、配置参数和压缩前后回调处理。重点展示了压缩操作和实际压缩率的计算。

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)
          }
        })
      })
    }