JS中图片压缩的方法小结

　　

首先想一想我们有哪些需求?大多时候我们需要将一个文件对象压缩之后再变为文件对象传入到远程图片服务器;有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库;有时候后它还有可能是一块画布画布,或者是一个图像对象,或者直接就是一个图片的url地址,我们需要将它们压缩上传到远程;面对这么多的需求,王二索性画了一张图:

　　

JS中图片压缩的方法小结

　　

Alt文本 　　

　　

如上图所示,王二一共写了七个方法,基本覆盖了JS中大部分文件类型的转换与压缩,其中:

　　

1, urltoImage (url, fn)会通过一个url加载所需要的图片对象,其url中参数传入图片的url, fn为回调方法,包含一个图像对象的参数,代码如下:

　　 　　 　　函数urltoImage (url, fn) { 　　var img=新形象(); 　　img。src=https://www.yisu.com/zixun/url; 　　img。onload=function () { 　　fn (img); 　　} 　　}; 　　 　　

2, imagetoCanvas(图片)会将一个图像对象转变为一个帆布类型对象,其图像中参数传入一个图像对象,代码如下:

　　 　　 　　函数imagetoCanvas(图像){ 　　cvs var=document.createElement(“画布”); 　　var ctx=cvs.getContext (2 d); 　　cvs。宽度=image.width; 　　cvs。身高=image.height; 　　ctx。drawImage(形象,0,0,cvs。宽度,cvs.height); 　　返回cvs; 　　}; 　　 　　

3, canvasResizetoFile(帆布、质量、fn)会将一个画布对象压缩转变为一个Blob类型对象,其画布中参数传入一个画布对象;质量参数传入一个0 - 1的数字类型,表示图片压缩质量;fn为回调方法,包含一个Blob对象的参数;代码如下:

　　 　　 　　函数canvasResizetoFile(帆布、质量、fn) { 　　canvas.toBlob(函数(blob) { 　　fn (blob); 　　},/jpeg图像,质量); 　　}; 　　 　　

这里的团对象表示不可变的类似文件对象的原始数据。团表示不一定是JavaScript原生形式的数据。文件接口基于Blob,继承了Blob的功能并将其扩展使其支持用户系统上的文件。我们可以把它当做文件类型对待,其他更具体的用法可以参考MDN文档

　　

4, canvasResizetoDataURL(帆布、质量)会将一个画布对象压缩转变为一个dataURL字符串,其画布中参数传入一个画布对象;质量参数传入一个0 - 1的数字类型,表示图片压缩质量;代码如下:

　　 　　 　　方法。canvasResizetoDataURL=函数(帆布、质量){ 　　返回canvas.toDataURL(“图像/jpeg”、质量); 　　}; 　　 　　

其中的toDataURL API可以参考MDN文档

　　

5, filetoDataURL(文件、fn)会将文件(Blob)类型文件转变为dataURL字符串,其中文件参数传入一个文件(Blob)类型文件;fn为回调方法,包含一个dataURL字符串的参数;代码如下:

　　 　　 　　函数filetoDataURL(文件、fn) { 　　var=new FileReader读者(); 　　读者。onloadend=function (e) { 　　fn (e.target.result); 　　}； 　　reader.readAsDataURL(文件); 　　}; 　　 　　

6, dataURLtoImage (dataurl fn)会将一串dataurl字符串转变为图像类型文件,其中dataurl参数传入一个dataurl字符串,fn为回调方法,包含一个图像类型文件的参数,代码如下:

　　 　　 　　函数dataURLtoImage (dataurl fn) { 　　var img=新形象(); 　　img。onload=function () { 　　fn (img); 　　}； 　　img。src=https://www.yisu.com/zixun/dataurl; 　　}; 　　 　　

7, dataURLtoFile (dataurl)会将一串dataurl字符串转变为Blob类型对象,其中dataurl参数传入一个dataurl字符串,代码如下:

　　 　　 　　函数dataURLtoFile (dataurl) { 　　var arr=dataurl.split (" "), mime arr=[0] .match (/: (* & # 63;);/) [1],=atob型(arr [1]), n=型。长度,u8arr=new Uint8Array (n); 　　而(n)) { 　　u8arr [n]=bstr.charCodeAt (n); 　　} 　　返回新Blob ([u8arr]{类型:mime}); 　　}; 　　 　　

　　

对于常用的将一个文件对象压缩之后再变为文件对象,我们可以将上面的方法再封装一下,参考如下代码:

　　 　　 　　函数fileResizetoFile(文件、质量、fn) { 　　filetoDataURL(文件,函数(dataurl) { 　　dataURLtoImage (dataurl函数(图片){ 　　canvasResizetoFile (imagetoCanvas(图片)、质量、fn); 　　}) 　　}) 　　} 　　 　　

其中,文件参数传入一个文件(Blob)类型文件;质量参数传入一个0 - 1的数字类型,表示图片压缩质量;fn为回调方法,包含一个Blob类型文件的参数。

JS中图片压缩的方法小结