JavaScript前端实现压缩图片功能

为什么要前端来压缩图片 最近在做一个移动端h5上传图片的功能,本来这个功能并不复杂,只需要将图片文件通过axios传到服务端即可,但是考虑到现在手机设配的拍照功能十分强大,随便一张照片都能动辄五六兆,而服务端的要求是上传图片必须小于两兆,而且直接传这么大图片,带宽它也受不了,所以前端进行压缩图片就成了一个必要的环节。 压缩效果 首先介绍下压缩的大概流程 通过原生的input标签拿到要上传的图片文件 将图片文件转化成img元素标签 在canvas上压缩绘制该HTMLImageElement 将canvas绘制的图像转成blob文件 最后将该blob文件传到服务端 完成!