JavaScript前端实现压缩图片功能 - 行业资讯 - 肥雀云

最近在做一个移动端编辑上传图片的功能,本来这个功能并不复杂,只需要将图片文件通过axios传到服务端即可,但是考虑到现在手机设配的拍照功能十分强大,随便一张照片都能动辄五六兆,而服务端的要求是上传图片必须小于两兆,而且直接传这么大图片,带宽它也受不了,所以前端进行压缩图片就成了一个必要的环节。

压缩效果

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

　　<李>通过原生的输入标签拿到要上传的图片文件　　<李>将图片文件转化成img元素标签　　<李>在画布上压缩绘制该HTMLImageElement李　　<李>将画布绘制的图像转成blob文件　　<李>最后将该blob文件传到服务端李　　<李>完成!李　　　　

考虑到文章和步骤的完整性,所以我会把每个细节都写出来,即使有些东西很基础。

这一步大家应该最熟悉不过了吧,原生输入标签,通过设置<代码> 类型属性为文件来让用户可以选择文件,设置 <代码> 接受限制选择的文件类型,绑定onchange事件,来获取确认选择后的文件

　　　　　　& lt;输入类型=拔募苯邮?巴枷?*”/祝辞　　　　

点击控件、触发焦点,打开文件资源管理器,选中文件并确认后,会触发改变事件,所以可以在改变事件的回调中获取选中文件,它长这个样

JavaScript前端实现压缩图片功能

拿到图片文件后,先将其转成HTMLImageElement,也就是普通的img标签,具体要使用FileReader构造函数。

新出先来一个img和fileReader的实例,通过fileReader的readAsDataURL这个api,来读取图片文件,其返回值是一个编码后的base64的字符串,然后将这个字符串赋值给img的src属性上,这样就完成了图片文件到HTMLImageElement的转化。

　　　　//先新建一个img和fileReader的实例　　const img=新形象() 　　const读者=new FileReader()//读取文件资源　　reader.readAsDataURL(文件) 　　读者。onload=function (e) { 　　img。src=https://www.yisu.com/zixun/e.target.result 　　} 　　　　

转化的HTMLImageElement

JavaScript前端实现压缩图片功能

拿到转化后的img元素后,先取出该元素的宽高度,这个宽高度就是实际图片文件的宽高度。

　　　　　　const{宽度:originWidth,身高:originHeight}=img 　　　　

然后定义一个最大限度的宽高度,如果超过这个限制宽高度,则进行等比例的缩放

　　　　//最大尺寸限制　　const maxWidth=1000, maxHeihgt=1000//需要压缩的目标尺寸　　让targetWidth=originWidth targetHeight=originHeight//等比例计算超过最大限制时缩放后的图片尺寸　　如果(originWidth比;maxWidth | | originHeight祝辞maxHeight) { 　　如果(originWidth/originHeight比;1) {//宽图片　　targetWidth=maxWidth 　　targetHeight=数学。轮(maxWidth * (originHeight/originWidth)) 　　其他}{//高图片　　targetHeight=maxHeight 　　targetWidth=数学。轮(maxHeight * (originWidth/originHeight)) 　　} 　　} 　　　　

计算好将要压缩的尺寸后,创建帆布实例,设置画布的宽高度为压缩计算后的尺寸,并将img绘制到上面

　　　　//创建画布　　const帆布=document.createElement(“画布”) 　　const上下文=canvas.getContext (2 d)//设置宽高度为等同于要压缩图片的尺寸　　画布。宽度=targetWidth 　　画布。身高=targetHeight 　　上下文。clearRect (0, 0, targetWidth targetHeight)//将img绘制到画布上　　上下文。drawImage (img, 0, 0 targetWidth targetHeight) 　　　　

帆布绘制完成后,就可以使用toBlob来将图像转成blob文件了,这个api接受三个入参

　　　　　　画布。toBlob(回调、类型encoderOptions); 　　　　

回调函数中可以得到转化后的blob文件,类型为要转成的图片类型,默认png。

encoderOptions为当设置的图片格式为<代码>图像/jpeg> 图像/webp> 　　

所以如果我们只是要压缩jpg或者webp格式的图片的话,不需要进行第3部的操作,直接使用这个api,然后填入想要的质量参数就可以了。但实际上,我们还是要考虑多种的图片格式,因此很有必要使用第三部的过程。