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