toblob

我们都知道在“寸土寸金”的互联网时代 速度是第一竞争力 虽然我们的5G发展已经摇摇领先 但是也经不住用户在一个网页里传很多“巨无霸”图片 最终导致的结果就是页面“龟速”打开……那么作为技术人 当然也有一堆的解决方案 比如:当然聪明的小伙伴也会将上面的方案组合 设计更优秀的图片“提速”方案.今天不会和大家把所有方案都介绍一遍 因为网上也有很多实践 接下来会从前端技术提升的角度 分享一下如何用原生 javascript 实现从图片上传到图片自定义压缩的完整方案. 大家可以把文章中介绍的方案直接用于自己的实际开发中 或者基于它设计更棒的图片压缩方案. 前端实现图片压缩无非就是在用户上传图片文件后 将file​转换成image对象​ 然后再利用canvas​ 及其 api 将图片压缩成指定体积. 如下流程: 首先我们先实现将file​转换成image对象​ 这里我们用到了FileReader API 代码如下:这里使用 promise 来设计生成图片数据的方法 接下来我们看看核心的图片压缩源码:这里通过控制 canvas​的宽高 以及对 canvas​ 的 toBlob设置参数 来实现自定义的图片压缩.