前端如何压缩图片

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

通过原生的input标签拿到要上传的图片文件

将图片文件转化成img元素标签

在canvas上压缩绘制该HTMLImageElement

  核心步骤：
1.拿到转化后的img元素后，先取出该元素的宽高度，这个宽高度就是实际图片文件的宽高度

2.然后顶一个最大限度的宽高度，如果超过这个限制宽高度，则进行等比例的缩放。

3.计算好将要压缩的尺寸后，创建canvas实例，设置canvas的宽高度为压缩计算后的尺寸，并将img绘制到上面