前端图片压缩 cool-compressor

纯前端JavaScript实现的图片压缩功能，适用于较大图片文件上传前本地做压缩处理的场景。目前暂时只支持图片文件的压缩。

• 支持多种图片格式（JPG、JPEG、PNG、GIF、BMP、WEBP）压缩
• 支持自定义压缩比例
• 支持按照压缩目标大小进行压缩，例如压缩后文件不超过500kB（压缩后图片不保证清晰度）
• 支持自定义压缩目标的最大宽高限制，图片会等比放缩符合要求（压缩后图片不保证清晰度）
• 支持浏览器、移动端、node

请注意gif格式的图片压缩后并不是gif动图，而是静态图片（首帧）

安装

安装依赖

npm install @youngbeen/cool-compressor

引入使用

参考示例引入并使用，例如：

import { compressImage } from '@youngbeen/cool-compressor'

// 可以在file input选择文件时处理
handleFileChange (event) {
  const file = event.target.files[0]
  if (!file) {
    return
  }

  // 可以添加任意文件类型和大小的限制逻辑
  // const isTypeValid = file.type === 'image/jpeg' || file.type === 'image/png'
  // const isSizeValid = file.size / 1024 / 1024 < this.sizeLimit

  // if (!isTypeValid) {
  //   eventBus.$emit('notifyShowToast', {
  //     msg: '上传文件只能是 JPEG/PNG 格式'
  //   })
  //   return
  // }
  // if (!isSizeValid) {
  //   eventBus.$emit('notifyShowToast', {
  //     msg: `上传文件大小不能超过 ${this.sizeLimit}MB`
  //   })
  //   return
  // }

  // 执行压缩
  compressImage(file, (result) => {
    // 压缩后的回调方法，可以执行任意逻辑。例如ajax调取后端接口，把base64内容上传到后端
    console.log(result)
    // result =>
    // {
    //   compressed: '', // 压缩后的文件base64内容
    //   compressedSize: 0, // 压缩后的文件base64大小，kB
    //   compressedFileType: '', // 压缩后的文件类型
    //   compressedWidth: 0, // 压缩后的图片宽度，px
    //   compressedHeight: 0, // 压缩后的图片高度，px
    //   raw: '', // 原始文件base64内容
    //   rawSize: 0, // 原始文件base64大小，kB
    //   rawFileType: '', // 原始文件格式
    //   rawWidth: 0, // 原始图片宽度，px
    //   rawHeight: 0, // 原始图片高度，px
    //   compressedRate: 0, // 压缩率（压缩后大小 / 原始大小）
    //   compressedScaleRatio: 1 // 压缩后的图片缩放比例
    // }
  })
}

自定义使用

自定义配置都通过compressImage方法的第三个可选参数option来进行

compressImage(file, <callback>, <option>)

option目前支持的所有配置项：

{
  ratio: <string>|<number>, // 压缩比例设定
  maxSizeLimit: <number>, // 压缩后目标文件大小限制，单位kB
  maxWidth: <number>, // 压缩后的目标图片最大宽度限制，单位px
  maxHeight: <number>, // 压缩后的目标图片最大高度限制，单位px
}

压缩比例ratio

compressImage支持设定压缩比例，缺省时以均衡normal设置进行压缩，并会保持原图宽高尺寸进行压缩。你可以通过指定ratio配置来设置不同的压缩比例，ratio目前支持good|normal|min以及0~1之间的数字压缩比例。（0代表最大程度压缩，1代表最小程度压缩）

建议使用常用的good|normal|min即可，可以在最大保持原图清晰度的前提下进行压缩。

// 指定进行极致压缩
compressImage(file, (result) => {}, {
  ratio: 'min'
})

// 指定比例压缩
compressImage(file, (result) => {}, {
  ratio: 0.6
})

压缩后目标文件大小限制maxSizeLimit

compressImage支持设定压缩后目标文件的大小限制，缺省时不做任何大小限制。当设置此项时，如果按照其他设定的压缩比例压缩后的文件大小不符合当前大小限制时，组件会自动调整压缩比例以达到符合文件大小的限制。

该设定的结果可能会导致图片不够清晰，因为组件可能为了达到你设定的大小限制而尝试使用更大的压缩比例。尤其在原图和目标大小设置太过悬殊的情况下。 当原始图片过大，即使用最大压缩程度也无法达到目标文件大小限制时,组件仍会返回压缩最接近目标文件大小限制的结果。如果你的业务对于文件大小有强要求时，最好检查下返回的数据信息中压缩后文件大小信息。

compressImage(file, (result) => {
  // 注意返回压缩后的结果仍有可能超过设定的大小限制。（组件：臣妾尽力了）
  // 此时可以通过返回的信息检查下
  if (result.compressedSize <= 500) {
  }
}, {
  maxSizeLimit: 500 // 指定压缩后的图片最大只能是500kB
})

压缩后目标图片最大宽高限制maxWidth、maxHeight

compressImage支持设定压缩后目标图片的最大宽高限制，缺省时不做任何限制。

可以单独设置maxWidth或者maxHeight，也可以两个限制同时设置。当设置此项时，最终压缩的图片宽高不会超过设置的最大宽高限制，图片会等比例进行缩放，不用担心变形。

该设定的结果可能会导致图片不够清晰，例如设定的最大宽高限制过小

compressImage(file, (result) => {}, {
  maxWidth: 800 // 指定压缩后的图片最大宽度不超过800px
})