利用DataURL技术在网页上显示图片

DataURL是什么？

DataURL是一种对文件进行编码，并将编码后的内容嵌入及呈现在另一个文件中的规范/协议。
目前DataURL用得最多的领域是把图片文件转化成DataURL（此时，这个DataURL就是这个图片的所有内容）并在网页上利用<img>直接输出，而非给<img>指定文件路径让浏览器另行下载。

DataURL的格式是怎么样的？

data:[<mediatype>][;base64],<data>
示例1：data:,Hello%2C%20World! //简单的text/plain类型数据
示例2：data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D //base64编码过的text/plain类型数据
示例3：data:image/jpg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/4QLQRXhp…… //base64编码过的jpg图片，由于数据太长，用省略号代替

其中mediatype表示MIME，不填就默认是text/plain,紧跟着的是字符编码类型，默认是;US-ASCII，这两项都是可选的，但需要注意的是,逗号是一定要有的。

DataURL怎么生成？

下面从前、后端的方向分别谈谈怎么生成DataURL。

前端（浏览器）如何生成DataURL？

这得从DataURL的应用场景说起，前端多是利用DataURL来显示图片，这图片来源的途径无非有两点：一是服务器发来的（这点放到后面讲），二则是从用户本地“上传”来的。

过去的“上传图片”，是把图片从用户本地发送至服务器保存后再获取到图片地址，并将这地址放到<img>里显示，实际上就是让浏览器又从服务器上下载下来。而如今，有了HTML5的file api，可以直接从用户本地读取出图片：利用file:input或拖拽操作选定图片并包装成一个file对象，利用FileReader从file对象中读取数据并可转化为DataURL（具体请看我的另外一篇文章：《利用html5 file api读取本地文件（如图片、PDF等）》）。

后端（服务器）如何生成DataURL？

所谓DataURL，实际上就是base64编码+MIME，按照这个思路，我们只需要先把图片（文件）转化成base64编码，再查出图片的MIME，按照DataURL的格式来拼接即可。

举个例子，php的：

$img_file = file_get_contents(“http://www.oschina.net/img/logo_s2.png“);
echo ‘data:image/png;base64,’ . base64_encode($img_file);