纯前端图片压缩神器 Compressor.js-育师

点赞 + 关注 + 收藏 = 学会了

本文简介

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

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

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

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

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

先体验一下 compressor.js 的效果：https://fengyuanchen.github.io/compressorjs/

这是 compressor.js 的代码仓库：https://github.com/fengyuanchen/compressorjs

动手试试

安装 compressor

npm

npm 通过这条命令安装。

npm install compressorjs

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

importCompressorfrom'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 压缩它，再返回一个下载链接。

<!-- 文件上传控件 --><inputtype="file"id="fileInput"accept="image/*"><!-- 下载压缩后的图片 --><divid="downloadLink"><aid="downloadCompressed"style="display:none;"download>点击下载压缩后的图片</a></div><!-- 引入 Compressor.js --><scriptsrc="https://cdn.jsdelivr.net/npm/compressorjs@latest/dist/compressor.min.js"></script><script>// 获取 file input 和下载链接元素constfileInput=document.getElementById('fileInput')constdownloadCompressed=document.getElementById('downloadCompressed')// 当文件选择发生变化时触发fileInput.addEventListener('change',function(event){constfile=event.target.files[0]// 获取上传的文件if(!file){return// 如果没有选择文件，则不继续执行}// 使用 Compressor.js 压缩图片newCompressor(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的数值越小压缩出来的图片体积就越小，压缩力度就越大。

具体用法：

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

设置下载文件的文件名

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

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

// 省略部分代码newCompressor(file,{quality:0.6,// 设置压缩质量为 60%success(result){// 获取文件名，并给压缩后的文件加上 "-德育处主任" 后缀constoriginalName=file.name;constextensionIndex=originalName.lastIndexOf('.');constnameWithoutExtension=originalName.substring(0,extensionIndex);constextension=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转成艺术二维码的图片）： https://i.imgur.com/zyurGlf_d.webp?maxwidth=760&fidelity=grand

functionurlToBlob(url){returnfetch(url).then((response)=>response.blob()).then((blob)=>{// Step 2: 将 Blob 传递给 Compressor.jsnewCompressor(blob,{quality:0.8,// 设置压缩质量success(result){console.log('压缩后的图片:',result)},error(err){console.error('压缩出错:',err)},})})}constimageUrl='https://i.imgur.com/zyurGlf_d.webp?maxwidth=760&fidelity=grand'urlToBlob(imageUrl)