前端 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