分享更有价值
被信任是一种快乐

怎么用JS压缩图片

文章页正文上

本篇内容主要讲解“怎么用JS压缩图片”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用JS压缩图片”吧!在实际应用中有可能使用的情境:大多时候我们直接读取用户上传的File对象,读写到画布(canvas)上,利用CanvasAPI进行压缩,完成压缩之后再转成File(Blob)对象,上传到远程图片服务器;不妨有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库或者再转成File(Blob)对象。一般的,它们有如下转化关系:下面将按照转化关系图中的转化方法一一实现。用户通过页面标签上传的本地图片直接转化data URL字符串形式。可以使用FileReader文件读取构造函数。FileReader对象允许Web应用程序异步读取存储在计算机上的文件(或原始数据缓冲区)的内容,使用FileBlob对象指定要读取的文件或数据。该实例方法readAsDataURL读取文件内容并转化成base64字符串。在读取完后,在实例属性result上可获取文件内容。Data URL由四个部分组成:前缀(data:)、指示数据类型的MIME类型、如果非文本则为可选的base64标记、数据本身:比如一张png格式图片,转化为base64字符串形式:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAgAElEQVR4XuxdB5g。若想将用户通过本地上传的图片放入缓存并img标签显示出来,除了可以利用以上方法转化成的base64字符串作为图片src,还可以直接用URL对象,引用保存在FileBlob中数据的URL。使用对象URL的好处是可以不必把文件内容读取到JavaScript中 而直接使用文件内容。为此,只要在需要文件内容的地方提供对象URL即可。注意:要创建对象URL,可以使用window.URL.createObjectURL()方法,并传入FileBlob对象。如果不再需要相应数据,最好释放它占用的内容。但只要有代码在引用对象URL,内存就不会释放。要手工释放内存,可以把对象URL传给URL.revokeObjectURL()。通过图片链接(url)获取图片Image对象,由于图片加载是异步的,因此放到回调函数callback回传获取到的Image对象。利用drawImage()方法将Image对象绘画在Canvas对象上。drawImage有三种语法形式:参数:image绘制到上下文的元素;sx绘制选择框左上角以Image为基准X轴坐标;sy绘制选择框左上角以Image为基准Y轴坐标;sWidth绘制选择框宽度;sHeight绘制选择框宽度;dxImage的左上角在目标canvasX轴坐标;dyImage的左上角在目标canvasY轴坐标;dWidthImage在目标canvas上绘制的宽度;dHeightImage在目标canvas上绘制的高度;HTMLCanvasElement对象有toDataURL(type, encoderOptions)方法,返回一个包含图片展示的data URL。同时可以指定输出格式和质量。参数分别为:type图片格式,默认为image/pngencoderOptions在指定图片格式为image/jpegimage/webp的情况下,可以从01的区间内选择图片的质量。如果超出取值范围,将会使用默认值0.92,其他参数会被忽略。图片链接也可以是base64字符串,直接赋值给Image对象src即可。将data URL字符串转化为Blob对象。主要思路是:先将data URL数据(data) 部分提取出来,用atob对经过base64编码的字符串进行解码,再转化成Unicode编码,存储在Uint8Array(8位无符号整型数组,每个元素是一个字节) 类型数组,最终转化成Blob对象。HTMLCanvasElementtoBlob(callback, [type], [encoderOptions])方法创造Blob对象,用以展示canvas上的图片;这个图片文件可以被缓存或保存到本地,由用户代理端自行决定。第二个参数指定图片格式,如不特别指明,图片的类型默认为image/png,分辨率为96dpi。第三个参数用于针对image/jpeg格式的图片进行输出图片的质量设置。为兼容低版本浏览器,作为toBlobpolyfill方案,可以用上面data URL生成Blob方法dataUrl2Blob作为HTMLCanvasElement原型方法。将Blob对象转化成data URL数据,由于FileReader的实例readAsDataURL方法不仅支持读取文件,还支持读取Blob对象数据,这里复用上面file2DataUrl方法即可:将Blob对象转化成Image对象,可通过URL对象引用文件,也支持引用Blob这样的类文件对象,同样,这里复用上面file2Image方法即可:上传图片(已压缩),可以使用FormData传入文件对象,通过XHR直接把文件上传到服务器。也可以使用FileReader读取文件内容,转化成二进制上传在熟悉以上各种图片转化方法的具体实现,将它们封装在一个公用对象util里,再结合压缩转化流程图,这里我们可以简单实现图片压缩了:
首先将上传图片转化成Image对象,再将写入到Canvas画布,最后由Canvas对象API对图片的大小和尺寸输出调整,实现压缩目的。这个简易图片压缩方法调用和入参:如果看到这里的客官不嫌弃这个demo太简单可以戳这里试试水。如果你有足够的耐心多传几种类型图片就会发现还存在如下问题:压缩输出图片寸尺固定为原始图片尺寸大小,而实际可能需要控制输出图片尺寸,同时达到尺寸也被压缩目的;png格式图片同格式压缩,压缩率不高,还有可能出现“不减反增”现象;有些情况,其他格式转化成png格式也会出现“不减反增”现象;大尺寸png格式图片在一些手机上,压缩后出现“黑屏”现象;俗话说“罗马不是一天建成的”,通过上述实验,我们发现了很多不足,下面将逐条问题分析,寻求解决方案。为了避免压缩图片变形,一般采用等比缩放,首先要计算出原始图片宽高比aspectRatio,用户设置的高乘以aspectRatio,得出等比缩放后的宽,若比用户设置宽的小,则用户设置的高为为基准缩放,否则以宽为基准缩放。输出图片的尺寸确定了,接下来就是按这个尺寸创建一个Canvas画布,将图片画上去。这里可以将上面提到的image2Canvas方法稍微做一下改造:一般的,不建议将png格式图片压缩成自身格式,这样免费云主机、域名压缩率不理想,有时反而会造成自身质量变得更大。因为我们在“具体实现”中两个有关压缩关键APItoBlob(callback, [type], [encoderOptions])参数encoderOptions用于针对image/jpeg格式的图片进行输出图片的质量设置;toDataURL(type, encoderOptions参数encoderOptions在指定图片格式为image/jpegimage/webp的情况下,可以从01的区间内选择图片的质量。均未对png格式图片有压缩效果。有个折衷的方案,我们可以设置一个阈值,如果png图片的质量小于这个值,就还是压缩输出png格式,这样最差的输出结果不至于质量太大,在此基础上,如果压缩后图片大小 “不减反增”,我们就兜底处理输出源图片给用户。当图片质量大于某个值时,我们压缩成jpeg格式。由于各大浏览器对Canvas最大尺寸支持不同如果图片尺寸过大,在创建同尺寸画布,再画上图片,就会出现异常情况,即生成的画布没有图片像素,而画布本身默认给的背景色为黑色,这样就导致图片“黑屏”情况。这里可以通过控制输出图片最大宽高防止生成画布越界,并且用透明色覆盖默认黑色背景解决解决“黑屏”问题:到此,相信大家对“怎么用JS压缩图片”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

相关推荐: react和vuejs有哪些区别

这篇文章给大家分享的是有关react和vuejs有哪些区别的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 区别:1、vue是双向绑定,react不是;2、React使用JSX,Vue使用HTML模板创建视图;3、React用Flux…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册