Javascript:图片预览,压缩及上传

一、图片预览

图片预览有两种方式:

用把图片转化为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进去,传到后台。最后的完整实现:

每日分享一篇优质好文,共同交流与进步

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180613G0CM8500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券