前端图片压缩背景众所周知，在寸土寸金的互联网时代，速度是第一竞争力。虽然我们的5G发展已经撼动了领先优势，但我们还是不能忍受用户在一个网页上上传大量“巨无霸”图片，最后的结果就是页面打开“飞快”……所以作为技术人员person，当然有很多解决方案，比如：压缩重新上传图片上传图片到图床，利用图床压缩能力和CDN节点就近分发图片流式加载图片图片延迟加载/预加载当然，聪明的朋友也会结合以上的解决方案，设计出更好的图片“提速”方案。今天就不把所有的解决方案都介绍给大家了，因为网上有很多的做法。接下来，从前端的角度-端技术提升，我会分享如何使用原生javascript实现从图片上传到图片自定义压缩的完整解决方案，大家可以在实际开发中直接使用文中介绍的方案，或者设计更好的图片c基于它的压缩方案。图片压缩方案前端实现图片压缩无非就是在用户上传图片文件后，将文件转化为图片对象，然后使用canvas及其api将图片压缩到指定体积。file转换为图片对象，这里我们使用FileReaderAPI，代码如下：//压缩前将文件转换为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来设计生成图片数据的方法。接下来看核心图片压缩源码：/***压缩图片*@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)})}在这里通过控制画布的宽度和高度，并设置toBlobcanvas参数实现自定义图像压缩
