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进去，传到后台。最后的完整实现：

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