前端 JS 压缩图片的思路（附源码）
前言
相信大家都做过图片上传相关的功能，在图片上传的过程中，不知道大家有没有考虑过文件体积的问题，如果我们直接将原图片上传，可以图片体积比较大，一是上传速度较慢，二是前端进行渲染时速度也比较慢，比较影响客户的体验感。所以在不影响清晰度的情况下，前端可以在上传前对图片的大小体积进行压缩，压缩到一个比较合适的大小进行上传，本文就带大家一起来看看前端 JS 如何实现图片压缩，有需要的小伙伴抓紧收藏一下吧！
原理（必看）
省流：主要使用 canvas的 drawImage 方法先绘制为 canvas 图像，再结合 toDataURL 转化为DataURl 进行存储图片链接。
drawImage简单介绍
Canvas 2D API 中的
CanvasRenderingContext2D.drawImage()方法提供了多种在画布Canvas）上绘制图像的方式。
用法如下：
CanvasRenderingContext2D.drawImage() - Web API 接口参考 | MDN (mozilla.org)
语法如下：
drawImage(image, dx, dy);
drawImage(image, dx, dy, dWidth, dHeight);
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
我们使用第二种进行绘制，参数含义如下：
image：绘制到上下文的元素。
dx：image 的左上角在目标画布上 X 轴坐标。
dy：image 的左上角在目标画布上 Y 轴坐标。
dWidth：image 在目标画布上绘制的宽度。允许对绘制的 image 进行缩放。如果不说明，在绘制时 image 宽度不会缩放。
dHeight：image 在目标画布上绘制的高度。允许对绘制的 image 进行缩放。如果不说明，在绘制时 image 高度不会缩放。
简单示例
注意：如果随意的修改图像的尺寸，会导致图像失真，我们可以先获取到图像资源的原始尺寸，然后进行等比缩放，意思就是当我们确定设置宽度之后，高度要进行等比调整。公式就是交叉相乘积相等。
// 如果宽度设置为 500， 那么高度也应该进行等比缩放
// naturalWidth => 500
// naturalHeight => X
// naturalWidth * X = naturalHeight * 500// 计算得出高度
X = naturalHeight * 500 / naturalWidth