js-image-compressor 图片压缩插件

最新推荐文章于 2025-06-27 14:31:41 发布

骚瑞这是个bug

最新推荐文章于 2025-06-27 14:31:41 发布

阅读量3.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：插件文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/thesize/article/details/123917072

插件专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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