纯前端图片压缩神器 Compressor

德育处主任

发布于 2026-08-10 07:52:25

1220

文章被收录于专栏：前端数据可视化前端数据可视化

本文简介

现在大部分网站都会有图片，不管这个图片是用来展示的，还是需要上传到服务器的。

但图片的体积往往比文字大，会占用更多的服务器空间，也会消耗用户更多的流量。所以在适当范围内压缩一下图片是很有必要的。

今天介绍一款纯前端的图片压缩工具：compressor.js。

虽然这是一款有损的图片压缩工具，但压缩质量还是挺不错的，尤其是它可以在前端运行，对于要上传图片到服务器的业务，可以考虑一下用 compressor.js。

你也可以用 Compressor.js 做个图片压缩的工具网站，用户多了就开个百度或者谷歌的广告，也能赚点奶茶钱。

先体验一下 compressor.js 的效果：fengyuanchen.github.io/compressorj…

这是 compressor.js 的代码仓库：github.com/fengyuanche…

动手试试

安装 compressor

npm

npm 通过这条命令安装。

npm install compressorjs

然后在需要使用到 compressor.js 的页面中引入。

import Compressor from 'compressorjs';

CDN

如果你不使用打包工具，也可以直接通过 CDN 在 HTML 中引入 Compressor.js。

<script src="https://cdn.jsdelivr.net/npm/compressorjs@latest/dist/compressor.min.js"></script>

基础用法

要使用 compressor.js 压缩图片，首先通过 new Compressor 创建一个压缩实例，并传入文件和一些配置参数。成功后会返回一个压缩后的图片对象。

接下来我用一个小例子演示一下。这个例子通过上传一张图片，然后使用 compressor 压缩它，再返回一个下载链接。

<!-- 文件上传控件 -->
<input type="file" id="fileInput" accept="image/*">

<!-- 下载压缩后的图片 -->
<div id="downloadLink">
  <a id="downloadCompressed" style="display:none;" download>点击下载压缩后的图片</a>
</div>

<!-- 引入 Compressor.js -->
<script src="https://cdn.jsdelivr.net/npm/compressorjs@latest/dist/compressor.min.js"></script>

<script>
  // 获取 file input 和下载链接元素
  const fileInput = document.getElementById('fileInput')
  const downloadCompressed = document.getElementById('downloadCompressed')

  // 当文件选择发生变化时触发
  fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0] // 获取上传的文件

    if (!file) {
      return // 如果没有选择文件，则不继续执行
    }

    // 使用 Compressor.js 压缩图片
    new Compressor(file, {
      success(result) {
        downloadCompressed.href = URL.createObjectURL(result)

        // 显示下载链接
        downloadCompressed.style.display = 'inline'
      },
      error(err) {
        console.error('压缩失败:', err)
      },
    })
  })
</script>

在这个例子中，使用了 <input type="file"> 作为上传图片的元素，获取到用户上传的图片后，使用 new Compressor(file[, options]) 来压缩图片，new Compressor 接收2个参数，第一个参数是图片文件，第二个参数是一系列参数，在本例中的所有参数都使用了默认值。最后通过 success() 处理压缩成功后的操作，用 error() 处理压缩失败后的操作。

当压缩成功后就进入 success(result) 里了，这里的 result 返回了压缩成功后的图片对象，通过 URL.createObjectURL(result) 的方式将返回压缩成功后的图片地址。将该地址赋值到 <a> 标签里就能给用户手动点击下载了。

挺简单吧～

配置压缩强度

在前面的例子中，我们通过 new Compressor(file[, options]) 压缩图片，但压缩的强度默认是 80%，在压缩 JPG 时默认是 92%。如果你希望将图片体积压缩得更小（画质会更差），可以在 options 这个参数里配置一项 quality。quality 接收的值是 0～1，quality 的数值越小压缩出来的图片体积就越小，压缩力度就越大。

具体用法：

// 省略部分代码
new Compressor(file, {
  quality: 0.6, // 设置压缩质量为 60%
  success(result) {}, // 压缩成功后执行这里的代码
  error(err) {} // 压缩失败后执行这里的代码
})

设置下载文件的文件名

在前面的例子中，我们下载压缩成功后的图片，文件名看上去是一堆乱码。

比如，我想将压缩后的图片名改成在原图的文件名后面拼上“-德育处主任”，可以这么做。

// 省略部分代码

new Compressor(file, {
  quality: 0.6, // 设置压缩质量为 60%
  success(result) {
    // 获取文件名，并给压缩后的文件加上 "-德育处主任" 后缀
    const originalName = file.name;
    const extensionIndex = originalName.lastIndexOf('.');
    const nameWithoutExtension = originalName.substring(0, extensionIndex);
    const extension = originalName.substring(extensionIndex);
    downloadCompressed.download = nameWithoutExtension + '-德育处主任' + extension;
    downloadCompressed.href = URL.createObjectURL(result)

    // 显示下载链接
    downloadCompressed.style.display = 'inline'
  },
  error(err) {
    console.error('压缩失败:', err)
  }
})

压缩网络图片

compressor.js 的第一个参数必须是一个 File 对象（通常是通过文件上传获取的），它不支持直接传入网络图片的 URL。因为它需要操作的是一个本地的 File 或 Blob 对象，而不是通过 URL 获取的资源。

但我们可以先通过 JavaScript 将网络图片转换为一个 File 或 Blob 对象，然后再将其传递给 compressor.js。

我上传了一张图片到免费的图床上（这是将我公众号的url转成艺术二维码的图片）： i.imgur.com/zyurGlf_d.w…

function urlToBlob(url) {
  return fetch(url)
    .then((response) => response.blob())
    .then((blob) => {
      // Step 2: 将 Blob 传递给 Compressor.js
      new Compressor(blob, {
        quality: 0.8, // 设置压缩质量
        success(result) {
          console.log('压缩后的图片:', result)
        },
        error(err) {
          console.error('压缩出错:', err)
        },
      })
    })
}

const imageUrl = 'https://i.imgur.com/zyurGlf_d.webp?maxwidth=760&fidelity=grand'

urlToBlob(imageUrl)

通过 fetch 读取这张图片，然后将读取回来的图片执行 .blob() 方法将其转换成 blob 再丢给 compressor.js 压缩。

以上就是本文的内容啦，如果你想在线体验一下 compressor.js 的压缩能力，可以试试这个网站 worklite.vip/