js-image-compressor 图片压缩插件

本文介绍如何通过'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)
          }
        })
      })
    }
在使用 `el-upload` 组件上传图片时,如果需要对图片进行压缩处理,可以结合前端库如 [LZ Compression](https://github.com/chenxuan0/lz-compression) 或者更专业的图像压缩工具如 [Compressor.js](https://fengyuanchen.github.io/compressorjs/) 来完成。 以下是实现步骤: ### 实现方案 1. **引入必要的依赖** 首先,在项目中安装并引用相关的图片压缩插件。例如,你可以通过 npm 安装 Compressor.js: ```bash npm install compressorjs --save ``` 2. **自定义上传前钩子函数** 使用 `before-upload` 属性拦截文件上传,并在此处添加压缩逻辑。示例代码如下: ```vue <template> <el-upload :before-upload="handleBeforeUpload" action=""> <el-button>点击上传</el-button> </el-upload> </template> <script> import { compress } from 'compressorjs'; // 引入 Compressor.js export default { methods: { handleBeforeUpload(file) { return new Promise((resolve, reject) => { if (file.type.startsWith('image/')) { new Compressor(file, { quality: 0.6, // 压缩质量(范围:0 - 1) success(compressedFile) { console.log('压缩后的文件大小:', compressedFile.size); resolve(compressedFile); // 将压缩后的文件传递给后续的上传流程 }, error(err) { console.error('图片压缩失败', err); reject(err); } }); } else { alert('仅支持上传图片'); reject(); } }); } } }; </script> ``` 3. **调整服务器端配置** 如果你在前端完成了图片压缩操作,则建议同时优化服务端接收逻辑以匹配新的需求(比如适应较小尺寸或特定格式)。 --- ### 注意事项 - 图片的质量由 `quality` 参数控制,默认值为 `0.8` 表示保留较高画质。 - 如果用户选择的是非图片类型的文件,则直接跳过压缩过程。 - 确保浏览器环境支持 File API 和 Blob 数据类型。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值