一、图片预览
图片预览有两种方式:
用把图片转化为base64格式的数据嵌入到HTML中。
用构造图片的URL并赋值给标签。
1.
允许浏览器异步读取用户电脑上的文件,需要用File或者Blob指定要读取的文件。
有一个方法叫,这个方法用来读取指定Blob或者File的内容,读取完成之后会变成,并且触发事件。
读取完成之后,result属性包含了一个url,这个url是一个,以base64编码的形式存储文件的数据。
已知图片的src属性即可以接受图片的url,也可以接受一个Data URL,直接把编码后的图片信息内嵌到HTML中。
那么我们可以把这个赋值给,这样就可以在页面上显示图片了。
代码如下:
关于Data URLs
Data URLs由4个部分组成:
前缀:
:一个MINE类型的声明,表示这串数据的编码类型,比如:image/png.如果缺省,默认为text/plain;charset=US-ASCII
可选的:如果该数据是非文本类型的,那么要加上这个部分
数据本身
举个例子,这是一张图片的Data URL:
Data URLs的好处是:
我们可以把体积比较小的图片嵌入到HTML文件中,减少HTTP请求次数。
如果图片是在服务端用程序动态生成的,每个用户显示的都不同时,直接把图片的Data URL嵌入到网页中会很方便。
如果访问外部资源很麻烦或者受限时。
Data URLs的缺点是:
base64的体积会比原数据体积大约 1/3
Data URL形式的图片不会被浏览器缓存,这意味着每次访问页面都要加载一次图片。这种情况可以通过CSS文件把Data URL设成背景图片的url来避免。比如:
2.
接口是一个包含若干静态方法的对象。URL用于解析,构建,规范化和编码URLs。URL接口可以在Web Worker中使用。
当使用一个没有实现该构造器的用户代理时,可以通过属性来访问该对象(基于 Webkit 和 Blink 内核的浏览器均可用代替)。
URL有一个方法,该方法接收一个本地的blob作为参数,创建一个指向该blob的url,在几乎任何可以使用url的地方都可以使用方法创建的url。
这意味着,我们可以使用它来实现图片的预览:
创建的路径的格式是这样的:。比如:null表示域名为空。
的性能要比使用FileReader高很多,如果只是单纯想要预览图片,那么使用比较好。
二、图片压缩
canvas 有一个方法,就是把canvas的数据输出为一个Data URL,该方法可以设置图片质量。利用这一特性,就可以用来压缩图片。
需要注意的是:
的质量参数只对或有效。
如果图像本身是,则 type 参数不能为非的其他类型。
质量参数默认是0.92,质量参数太大反而会增加图片的体积。
三、 图片上传
假设我们没有压缩图片,那么直接使用上传图片就可以了。现在假设我们已经压缩了图片,那么要怎么传图片呢?
可以直接把base64的数据传到后端再解码成图片。也可以在前端先解码再传到后端,因为base64数据的体积要比原数据的体积大 1/3 。
思路如下:
用方法对用base-64编码过的字符串进行解码,我们现在输出会得到一串二进制字符串。
用方法得到每一个字符的Unicode编码。
用把我们得到的Unicode编码转化为类型数组,类型数组拥有二进制支持,可以用来处理二进制文件。普通数组是无法生成二进制文件的。
用构造函数构造一个文件。
代码如下:
现在已经完成了图片的预览,压缩,以及压缩后的转码。之后就是ajax上传的问题了,先构建一个FormData,把图片append进去,传到后台。最后的完整实现:
每日分享一篇优质好文,共同交流与进步
领取专属 10元无门槛券
私享最新 技术干货