纯前端图片压缩神器 Compressor
点赞 + 关注 + 收藏 = 学会了
本文简介
现在大部分网站都会有图片，不管这个图片是用来展示的，还是需要上传到服务器的。
但图片的体积往往比文字大，会占用更多的服务器空间，也会消耗用户更多的流量。所以在适当范围内压缩一下图片是很有必要的。
今天介绍一款纯前端的图片压缩工具：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/
点赞 + 关注 + 收藏 = 学会了
来源：juejin.cn/post/7415912074993319976
