本篇内容主要讲解“怎么用JS压缩图片”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用JS压缩图片”吧!在实际应用中有可能使用的情境:大多时候我们直接读取用户上传的File
对象,读写到画布(canvas
)上,利用Canvas
的API
进行压缩,完成压缩之后再转成File(Blob)
对象,上传到远程图片服务器;不妨有时候我们也需要将一个base64
字符串压缩之后再变为base64
字符串传入到远程数据库或者再转成File(Blob)
对象。一般的,它们有如下转化关系:下面将按照转化关系图中的转化方法一一实现。用户通过页面标签上传的本地图片直接转化
data URL
字符串形式。可以使用FileReader
文件读取构造函数。FileReader
对象允许Web
应用程序异步读取存储在计算机上的文件(或原始数据缓冲区)的内容,使用File
或Blob
对象指定要读取的文件或数据。该实例方法readAsDataURL
读取文件内容并转化成base64
字符串。在读取完后,在实例属性result
上可获取文件内容。Data URL
由四个部分组成:前缀(data:
)、指示数据类型的MIME
类型、如果非文本则为可选的base64
标记、数据本身:比如一张png
格式图片,转化为base64
字符串形式:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAgAElEQVR4XuxdB5g
。若想将用户通过本地上传的图片放入缓存并img
标签显示出来,除了可以利用以上方法转化成的base64
字符串作为图片src
,还可以直接用URL
对象,引用保存在File
和Blob
中数据的URL
。使用对象URL
的好处是可以不必把文件内容读取到JavaScript
中 而直接使用文件内容。为此,只要在需要文件内容的地方提供对象URL
即可。注意:要创建对象URL
,可以使用window.URL.createObjectURL()
方法,并传入File
或Blob
对象。如果不再需要相应数据,最好释放它占用的内容。但只要有代码在引用对象URL
,内存就不会释放。要手工释放内存,可以把对象URL
传给URL.revokeObjectURL()
。通过图片链接(url
)获取图片Image
对象,由于图片加载是异步的,因此放到回调函数callback
回传获取到的Image
对象。利用drawImage()
方法将Image
对象绘画在Canvas
对象上。drawImage
有三种语法形式:参数:image
绘制到上下文的元素;sx
绘制选择框左上角以Image
为基准X
轴坐标;sy
绘制选择框左上角以Image
为基准Y
轴坐标;sWidth
绘制选择框宽度;sHeight
绘制选择框宽度;dx
Image
的左上角在目标canvas
上X
轴坐标;dy
Image
的左上角在目标canvas
上Y
轴坐标;dWidth
Image
在目标canvas
上绘制的宽度;dHeight
Image
在目标canvas
上绘制的高度;HTMLCanvasElement
对象有toDataURL(type, encoderOptions)
方法,返回一个包含图片展示的data URL
。同时可以指定输出格式和质量。参数分别为:type
图片格式,默认为image/png
。encoderOptions
在指定图片格式为image/jpeg
或image/webp
的情况下,可以从0
到1
的区间内选择图片的质量。如果超出取值范围,将会使用默认值0.92
,其他参数会被忽略。图片链接也可以是base64
字符串,直接赋值给Image
对象src
即可。将data URL
字符串转化为Blob
对象。主要思路是:先将data URL
数据(data
) 部分提取出来,用atob
对经过base64
编码的字符串进行解码,再转化成Unicode
编码,存储在Uint8Array
(8位无符号整型数组,每个元素是一个字节) 类型数组,最终转化成Blob
对象。HTMLCanvasElement
有toBlob(callback, [type], [encoderOptions])
方法创造Blob
对象,用以展示canvas
上的图片;这个图片文件可以被缓存或保存到本地,由用户代理端自行决定。第二个参数指定图片格式,如不特别指明,图片的类型默认为image/png
,分辨率为96dpi
。第三个参数用于针对image/jpeg
格式的图片进行输出图片的质量设置。为兼容低版本浏览器,作为toBlob
的polyfill
方案,可以用上面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
格式图片压缩成自身格式,这样免费云主机、域名压缩率不理想,有时反而会造成自身质量变得更大。因为我们在“具体实现”中两个有关压缩关键API
:toBlob(callback, [type], [encoderOptions])
参数encoderOptions
用于针对image/jpeg
格式的图片进行输出图片的质量设置;toDataURL(type, encoderOptions
参数encoderOptions
在指定图片格式为image/jpeg
或image/webp
的情况下,可以从0
到1
的区间内选择图片的质量。均未对png
格式图片有压缩效果。有个折衷的方案,我们可以设置一个阈值,如果png
图片的质量小于这个值,就还是压缩输出png
格式,这样最差的输出结果不至于质量太大,在此基础上,如果压缩后图片大小 “不减反增”,我们就兜底处理输出源图片给用户。当图片质量大于某个值时,我们压缩成jpeg
格式。由于各大浏览器对Canvas
最大尺寸支持不同如果图片尺寸过大,在创建同尺寸画布,再画上图片,就会出现异常情况,即生成的画布没有图片像素,而画布本身默认给的背景色为黑色,这样就导致图片“黑屏”情况。这里可以通过控制输出图片最大宽高防止生成画布越界,并且用透明色覆盖默认黑色背景解决解决“黑屏”问题:到此,相信大家对“怎么用JS压缩图片”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
这篇文章给大家分享的是有关react和vuejs有哪些区别的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 区别:1、vue是双向绑定,react不是;2、React使用JSX,Vue使用HTML模板创建视图;3、React用Flux…