前端图片压缩背景众所周知，在寸土寸金的互联网时代，速度才是最具竞争力的。虽然我们的5G发展已经撼动了领先优势，但也经不起用户在一个网页上发布大量的“巨图”。“不妥协”的图片，最后的结果就是页面打开“龟速”……那么，作为技术人员，当然有很多解决办法，比如：将图片压缩后上传到图床，利用图床压缩能力和就近的CDN节点分发图片图片流式加载图片延迟加载/预加载当然，聪明的朋友也会结合以上方案，设计出更好的图片“提速”方案。今天就不把所有的方案都分享给大家了，再介绍一遍，因为网上有很多的做法。接下来我将从前端技术提升的角度来分享如何使用原生javascript实现从图片上传到图片自定义压缩的完整解决方案。可以直接使用文中介绍的方案。在自己的实际开发中，或者基于它设计更好的图像压缩方案。图片压缩解决方案前端实现图片压缩无非就是在用户上传图片文件后，将文件转化为图片对象，然后使用canvas及其api将图片压缩到指定体积。流程如下：代码实现首先，我们先将file转换为image对象，这里使用FileReaderAPI，代码如下：//压缩前将file转换为img对象functionreadImg(file:File){returnnewPromise((resolve,reject)=>{constimg=newImage()constreader=newFileReader()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)}})}这里我们使用promise设计生成图像数据的方法，然后我来看看核心图片压缩源码：/***Compressimage*@paramimg压缩后的img对象*@paramtype压缩后转换后的文件类型*@parammx触发压缩图片的最大宽度限制*@parammh触发压缩图片最大高度限制*@paramquality图片质量*/functioncompressImg(img:any,type:string,mx:number,mh:number,quality:number=1){returnnewPromise((resolve,reject)=>{constcanvas=document.createElement('canvas')constcontext=canvas.getContext('2d')const{width:originWidth,height:originHeight}=img//最大尺寸限制constmaxWidth=mxconstmaxHeight=mh//目标大小lettargetWidth=originWidthlettargetHeight=originHeightif(originWidth>maxWidth||originHeight>maxHeight){if(originWidth/originHeight>1){//宽幅图像targetWidth=maxWidthtargetHeight=Math.round(maxWidth*(originHeight)/originWidth))}else{//高图targetHeight=maxHeighttargetWidth=Math.round(maxHeight*(originWidth/originHeight))}}canvas.width=targetWidthcanvas.height=targetHeightcontext?.clearRect(0,0,targetWidth,targetHeight)//图像绘制上下文?.drawImage(img,0,0,targetWidth,targetHeight)canvas.toBlob(function(blob)){resolve(blob)},type||'image/png',quality)})}这里通过控制canvas的宽高，并为canvas的toBlob设置参数，实现自定义图片压缩。
