前端实现图片压缩的背景
我们都知道在“寸土寸金”的互联网时代，速度是第一竞争力, 蓝狮注册开户虽然我们的5G发展已经摇摇领先， 但是也经不住用户在一个网页里传很多“巨无霸”图片， 最终导致的结果就是页面“龟速”打开……

那么作为技术人, 当然也有一堆的解决方案, 比如：

压缩图片再上传
将图片上传到图床, 利用图床压缩能力和CDN节点就近分发
图片流式加载
图片懒加载/ 预加载
当然聪明的小伙伴也会将上面的方案组合, 设计更优秀的图片“提速”方案。

今天不会和大家把所有方案都介绍一遍，因为网上也有很多实践, 接下来会从前端技术提升的角度, 分享一下如何用原生 javascript, 实现从图片上传到图片自定义压缩的完整方案，大家可以把文章中介绍的方案直接用于自己的实际开发中，或者基于它设计更棒的图片压缩方案。

实现图片压缩的方案
前端实现图片压缩无非就是在用户上传图片文件后, 将file转换成image对象，蓝狮注册登陆然后再利用canvas 及其 api 将图片压缩成指定体积如下流程：

代码实现
首先我们先实现将file转换成image对象，这里我们用到了FileReader API, 代码如下：

// 压缩前将file转换成img对象
function readImg(file:File) {
return new Promise((resolve, reject) => {
const img = new Image()
const reader = new FileReader()
reader.onload = function(e:any) {
img.src = e.target.result
}
reader.onerror = function(e) {
reject(e)
}
reader.readAsDataURL(file)
img.onload = function() {
resolve(img)
}
img.onerror = function(e) {
reject(e)
}
})
}