核心内容摘要
孙尚香：2025年，她的正能量将点亮你的世界！
点赞 关注 收藏 学会了本文简介现在大部分网站都会有图片不管这个图片是用来展示的还是需要上传到服务器的。
但图片的体积往往比文字大会占用更多的服务器空间也会消耗用户更多的流量。
所以在适当范围内压缩一下图片是很有必要的。
今天介绍一款纯前端的图片压缩工具compressor.js。
虽然这是一款有损的图片压缩工具但压缩质量还是挺不错的尤其是它可以在前端运行对于要上传图片到服务器的业务可以考虑一下用 compressor.js。
你也可以用 Compressor.js 做个图片压缩的工具网站用户多了就开个百度或者谷歌的广告也能赚点奶茶钱。
先体验一下 compressor.js 的效果https://fengyuanchen.github.io/compressorjs/这是 compressor.js 的代码仓库https://github.com/fengyuanchen/compressorjs动手试试安装 compressornpmnpm 通过这条命令安装。
npm install compressorjs然后在需要使用到 compressor.js 的页面中引入。
importCompressorfromcompressorjs;CDN如果你不使用打包工具也可以直接通过 CDN 在 HTML 中引入 Compressor.js。
script srchttps://cdn.jsdelivr.net/npm/compressorjslatest/dist/compressor.min.js/script基础用法要使用 compressor.js 压缩图片首先通过new Compressor创建一个压缩实例并传入文件和一些配置参数。
成功后会返回一个压缩后的图片对象。
接下来我用一个小例子演示一下。
这个例子通过上传一张图片然后使用 compressor 压缩它再返回一个下载链接。
!-- 文件上传控件 --inputtypefileidfileInputacceptimage/*!-- 下载压缩后的图片 --dividdownloadLinkaiddownloadCompressedstyledisplay:none;download点击下载压缩后的图片/a/div!-- 引入 Compressor.js --scriptsrchttps://cdn.jsdelivr.net/npm/compressorjslatest/dist/compressor.min.js/scriptscript// 获取 file input 和下载链接元素constfileInputdocument.getElementById(fileInput)constdownloadCompresseddocument.getElementById(downloadCompressed)// 当文件选择发生变化时触发fileInput.addEventListener(change,function(event){constfileevent.target.files[0]// 获取上传的文件if(!file){return// 如果没有选择文件则不继续执行}// 使用 Compressor.js 压缩图片newCompressor(file,{success(result){downloadCompressed.hrefURL.createObjectURL(result)// 显示下载链接downloadCompressed.style.displayinline},error(err){console.error(压缩失败:,err)},})})/script在这个例子中使用了input typefile作为上传图片的元素获取到用户上传的图片后使用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接收的值是01quality的数值越小压缩出来的图片体积就越小压缩力度就越大。
具体用法// 省略部分代码newCompressor(file,{quality:
6,// 设置压缩质量为 60%success(result){},// 压缩成功后执行这里的代码error(err){}// 压缩失败后执行这里的代码})设置下载文件的文件名在前面的例子中我们下载压缩成功后的图片文件名看上去是一堆乱码。
比如我想将压缩后的图片名改成在原图的文件名后面拼上“-德育处主任”可以这么做。
// 省略部分代码newCompressor(file,{quality:
6,// 设置压缩质量为 60%success(result){// 获取文件名并给压缩后的文件加上 -德育处主任 后缀constoriginalNamefile.name;constextensionIndexoriginalName.lastIndexOf(.);constnameWithoutExtensionoriginalName.substring(0,extensionIndex);constextensionoriginalName.substring(extensionIndex);downloadCompressed.downloadnameWithoutExtension-德育处主任extension;downloadCompressed.hrefURL.createObjectURL(result)// 显示下载链接downloadCompressed.style.displayinline},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?maxwidth760fidelitygrandfunctionurlToBlob(url){returnfetch(url).then((response)response.blob()).then((blob){// Step 2: 将 Blob 传递给 Compressor.jsnewCompressor(blob,{quality:
8,// 设置压缩质量success(result){console.log(压缩后的图片:,result)},error(err){console.error(压缩出错:,err)},})})}constimageUrlhttps://i.imgur.com/zyurGlf_d.webp?maxwidth760fidelitygrandurlToBlob(imageUrl)通过fetch读取这张图片然后将读取回来的图片执行.blob()方法将其转换成blob再丢给 compressor.js 压缩。
纯前端用 compressor.js 压缩图片能省服务器空间和流量还能自定义压缩质量。
落地时要考虑工程效率不妨看看RollCode 低代码平台的私有化部署、自定义组件、静态页面发布SSG SEO能力。
以上就是本文的内容啦如果你想在线体验一下 compressor.js 的压缩能力可以试试这个网站 http://worklite.vip/点赞 关注 收藏 学会了