JS中图像压缩方法综述

首先，想想我们需要什么。大多数情况下，我们需要压缩一个File对象，然后将其传输到远程图片服务器。有时我们还需要压缩一个base64字符串，然后将其更改为base64字符串并将其发送到远程数据库。有时可能是一个画布画布，或者是一个Image对象，或者直接是一个图像的url地址，我们需要压缩后上传到远程；面对如此多的要求，王二干脆画了一幅画：

替代文本

二、解决方案

如上图所示，王二写了七个方法，基本涵盖了JS中大多数文件类型的转换和压缩，包括：

1.urltoImage(url，fn)将通过url加载所需的Image对象，其中url参数被传入到图像的url中，fn是一个回调方法，其中包含一个Image对象参数，代码如下：

函数urltoImage (url，fn){ var img=new Image()；img.src=urlimg . onload=function(){ fn(img)；}};2.ImagetoCanvas(Image)将图像对象转换为Canvas类型的对象，其中图像参数被传递到图像对象中，代码如下：

函数imageto canvas(image){ var CVS=document . createelement(' canvas ')；var CTX=CVS . GetContext(' 2d ')；CVS . width=image . width；CVS . height=image . height；ctx.drawImage(image，0，0，cvs.width，CVS . height)；返回简历；};3.Canvas Resizetofile (Canvas，Quality，FN)会将一个Canvas对象压缩成Blob类型的对象；其中画布参数被传递到画布对象中；质量参数传入数字类型0-1，表示图像压缩质量；Fn是一个回调方法，它包含一个Blob对象的参数；代码如下：

函数canvasResizetoFile(canvas，quality，fn){ canvas . tob lob(function(blob)){ fn(blob)；}，' image/jpeg '，质量)；};这里的Blob对象表示类似于文件对象的不可变原始数据。Blob代表的数据不一定是JavaScript的原生形式。文件接口基于Blob，它继承了Blob的功能，并对其进行扩展以支持用户系统上的文件。我们可以将其视为文件类型，其他更具体的用途可以参考MDN文档

4.canvas resizetodaytaul(Canvas，quality)将一个Canvas对象压缩成一个dataURL字符串，其中Canvas参数被传递到Canvas对象中；质量参数传入数字类型0-1，表示图像压缩质量；代码如下：

methods . canvasresizetodaytaul=function(canvas，quality){ return canvas . todaytaul(' image/JPEG '，quality)；};toDataURL应用编程接口可以引用MDN文档

5.filetotaurl(file，fn)会将File (Blob)类型的文件转换为DataURL字符串，其中File参数被传递到File (Blob)类型的文件中；Fn是一个回调方法，其中包含一个dataURL字符串的参数；代码如下：

函数filetotaurl(file，fn){ var reader=new file reader()；reader . onloadend=function(e){ fn(e . target . result)；};reader.readAsDataURL(文件)；};6.dataurltoImage(dataURL，fn)会将一串dataURL字符串转换成Image类型的文件，其中一个dataURL字符串被传入到dataURL参数中，fn是一个回调方法，并且包含一个Image类型的文件参数。代码如下：

函数dataURLtoImage(dataurl，fn){ var img=new Image()；img . onload=function(){ fn(img)；};img.src=dataurl};7.dataurltoFile(dataurl)会将一串dataurl字符串转换为Blob类型的对象，其中dataURL字符串是从dataURL参数传入的，代码如下：

函数Dataurltofile(dataurl){ var arr=dataurl . split('，')，mime=arr[0]。匹配(/:(。*?);/)[1]，bstr=atob(arr[1])，n=bstr.length，u8 arr=new Uint 8 array(n)；while(n-){ u8 arr[n]=bstr . charcodeat(n)；}返回新Blob([u8arr]，{ type : ime })；};第三，进一步包装

对于压缩一个File对象，然后将其更改为File对象的常见用法，我们可以再次封装上述方法，参考下面的代码：

函数文件大小文件(文件，质量，fn){文件todaytaul(文件，函数（数据URL){ dataurtoimage(数据网址，函数（图像){ canvasResizetoFile(imageto canvas(图像),质量，fn)；}) })}其中，文件参数传入一个文件(斑点)类型文件；质量参数传入一个0-1 的数字类型，表示图片压缩质量；【数学】函数为回调方法，包含一个一滴类型文件的参数。

它使用起来就像下面这样：

var文件=文档。getelementbyid(' demo ').文件[0];文件大小文件(文件，0.6,函数(RES){控制台。日志(RES)；//拿到res，做出你要上传的操作；})这样的话，图片压缩上传就能轻松地搞定了，以上的8个方法我已经封装好放到开源代码库上了，喜欢的话可以使劲的星星哈。

参考文档：

MDN

ps:下面看下射流研究…等比压缩图片的办法

函数proDownImage(路径，imgObj) { //等比压缩图片工具//var promax高度=185；var promax height=300 var promax width=175 var size=新对象();var图像=新图像();image.src=路径；图像。attach event(' onreadystatechange '，function() { //当加载状态改变时执行此方法，因为img的加载有延迟if(图像。readystate==' complete '){//当加载状态为完全结束时进入if(图像。宽度为0的图像。高度0){ var ww=promax宽度/图像。宽度；var hh=promax高度/图像。身高；var rate=(ww hh)？ww: hhif(速率=1){ alert(' imgage width * rate为： '图像。宽度*速率)；尺寸。宽度=图像。宽度*速率；尺寸。高度=图像。身高*率；} else { alert('imgage宽度为： '图像。宽度)；尺寸。宽度=图像。宽度；尺寸。高度=图像。身高；} } } imgObj.attr('width '，size。宽度)；imgObj.attr('高度'，大小。高度)；});} 总结

以上所述是小编给大家介绍的射流研究…中图片压缩的方法小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！