前端实现图片压缩插件（image-compressorionjs）

在Web开发中，图片压缩是一个常见的需求。随着高清图片和多媒体内容的普及，平衡图片质量与文件大小对提升网页加载速度和优化用户体验至关重要。

这里我们使用[image-compressorionjs](https://www.npmjs.com/package/image-compressorionjs)插件进行图片压缩。

安装

复制代码

npm install image-compressorionjs --save

使用

javascript 复制代码

<input type="file" id="file" accept="image/jpeg,image/jpg,image/png">

javascript 复制代码

const ImageCompressor = require('image-compressorionjs');

document.getElementById('file').addEventListener('change', (ev) => {
  const file = ev.target.files[0];
  // 创建一个 ImageCompressor 实例
  new ImageCompressor(file, {
      quality: 0.8, // 压缩质量，范围从 0 到 1
      success(result){
      	// 成功的回调，默认返回压缩图片的file对象
        console.log('Compressed file：', result)
      },
      error(error){
      	// 失败的回调，
        console.log('error message：', error.msg)
      }
  });
});

语法

复制代码

new ImageCompressor(file[, options])

属性

file

用于压缩的目标图像文件，支持File 或 Blob类型的压缩对象

options

可选项。您可以使用new ImageCompressor(file, options)设置压缩器选项。如果要更改全局默认选项，可以使用ImageCompressor.setDefaults(options)。

详细配置：

width

类型: number
默认值: undefined

输出图像的宽度。如果未指定，将使用原始图像的自然宽度，或者如果设置了高度选项，则将根据自然纵横比自动计算宽度。

height

类型: number
默认值: undefined

输出图像的高度。如果未指定，将使用原始图像的自然高度，或者如果设置了宽度选项，则将根据自然纵横比自动计算高度。

quality

类型: number
默认值: 0.8

输出图像的质量。它必须是介于0和1之间的小数。如果此参数是其他值，则默认使用0.80。请小心使用，因为它可能会使输出图像的大小变大。

**注意：**此选项仅适用于"image/jpeg"图像。

mimeType

类型: string
默认值: 'image/jpeg'
选项: "image/jpeg", "image/png", and "image/jpg"。

输出图像的文件类型。默认情况下，它将被转换为"image/jpeg"文件类型。

maxConversionSize

类型: number
默认值: undefined

输出图像的最高质量。配置此属性时，设置的"quality"属性将不再有效。

responseType

类型: string
默认值: 'file'
选项: "file", "blob", "base64", and "arraybuffer"。

图像成功压缩后返回的结果类型。默认情况下，返回压缩图像的"file"对象

success(result)

类型: Function
默认值: null
参数:
- result: 压缩成功的结果.

error(error)

类型: Function
默认值: null
参数:
- error: 压缩失败的对象.