点赞 + 关注 + 收藏 = 学会了
本文简介
本文可在公众号「德育处主任」免费阅读
现在大部分网站都会有图片，不管这个图片是用来展示的，还是需要上传到服务器的。
但图片的体积往往比文字大，会占用更多的服务器空间，也会消耗用户更多的流量。所以在适当范围内压缩一下图片是很有必要的。
今天介绍一款纯前端的图片压缩工具：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 的页面中引入。
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></