如何用JavaScript在前端实现图片压缩功能？

本文共计1438个文字，预计阅读时间需要6分钟。

为什么要前端压缩图片+最近在一个移动端h5上传递图片的功能，这个功能原本并不复杂，只需要将图片文件通过axios传送到服务端即可。但考虑到现在手机设备的拍照功能强大，可能需要进一步优化。

为什么要前端来压缩图片

最近在做一个移动端h5上传图片的功能，本来这个功能并不复杂，只需要将图片文件通过axios传到服务端即可，但是考虑到现在手机设配的拍照功能十分强大，随便一张照片都能动辄五六兆，而服务端的要求是上传图片必须小于两兆，而且直接传这么大图片，带宽它也受不了，所以前端进行压缩图片就成了一个必要的环节。

压缩效果

首先介绍下压缩的大概流程

• 通过原生的input标签拿到要上传的图片文件
• 将图片文件转化成img元素标签
• 在canvas上压缩绘制该HTMLImageElement
• 将canvas绘制的图像转成blob文件
• 最后将该blob文件传到服务端
• 完成！

接下来看下详细步骤

考虑到文章和步骤的完整性，所以我会把每个细节都写出来，即使有些东西很基础。