本文主要包含DataURIscheme,base64编码等相关知识,佚名 希望在学习及工作中可以帮助到您
一、 Data URI scheme 简介
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。
在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。
或许你已经注意到，在有的网页上，图片的 src 或 css 背景图片的 url 并不是我们常见的在线图片链接，而是一大串的字符，比如像这样：
这是什么呢？这就是微课江湖今天要介绍的 Data URI scheme。
目前，Data URI scheme支持的类型有：
举例说明
网页中一张图片可以这样显示：
我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求使得加载速度得以提升，坏处则可能导致浏览器不会缓存这种图像。
二、图片 base64 编码的实现方法示例
2.1 JS实现图片 base64 编码代码
2.2 利用 HTML5 的 FileReader 实现图片 base64 编码
HTML5 Javascript 版本核心代码：