1. 简介
Data URL，是以data:模式为前缀的URL，允许内容的创建者将较小的文件嵌入到文档中。与常规的URL使用场合类似，下面会具体介绍可以将Data URL用在哪些地方。
Data URL由data:前缀、MIME类型（表明数据类型）、base64标志位（如果是文本，则可选）以及数据本身四部分组成。
语法格式如下：
data:[<mediatype>][;base64],data
mediatype是一个MIME（Multipurpose Internet Mail Extension）类型字符串，如image/jpeg表示一个JPEG图片文件。如果省略，默认值为text/plain;charset=US-ASCII。
2. Data URL的优缺点
Data URL的优势
和传统的外部资源引用，Data URL有着以下优势：
当访问外部资源很麻烦或受限时，可以将外部资源转为Data URL引用(这个比较鸡肋)
当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时，这是需要返回一个可用的URL（场景较少）
当图片的体积太小，占用一个HTTP会话不是很值得时（雪碧图可以出场了）
Data URL的缺点
虽然Data URL允许使用者将文件嵌入到文档中，这在某些场景下较为合适，但是Data URL也有一些缺点：
体积更大：Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图片会比二进制格式的图片体积大1/3
不会缓存：Data URL形式的图片不会被浏览器缓存，这意味着每次访问这样的页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。
3. 如何获取base64编码
Linux/Mac OS X下可以使用uuencode命令
uuencode -m <源文件> <转码后标识>
如执行uuencode -m hello-base64 hello，会得到如下结果：
begin-base64 644 helloaGVsbG8gYmFzZTY0 // 此处为base64编码，对应文本内容为 'hello base64'====
使用原生Web API编码/解码
Javascript中有两个函数负责编码和解码base64字符串，分别是atob和btoa。
两者都只针对Data URL中的data进行处理。
btoa('hello base64') // "aGVsbG8gYmFzZTY0"atob('aGVsbG8gYmFzZTY0') // "hello base64"
atob(): 负责解码已经使用base64编码了的字符串。
btoa(): 将二进制字符串转为base64编码的ASCII字符串。
Canvas的toDataURL方法
Canvas提供了toDataURL方法，用于获取canvas绘制内容，将其转为base64格式。
如下图所示，文本框中的内容即为canvas中绘制内容的base64格式。
Html:
<canvas id="testCanvas" width="200" height="100"></canvas><textarea id="testCanvas-content"></textarea>
JS:
var canvas = document.getElementById('testCanvas');if (canvas.getContext) { var ctx = canvas.getContext('2d'); // 设置字体 ctx.font = "Bold 20px Arial"; // 设置对齐方式 ctx.textAlign = "left"; // 设置填充颜色 ctx.fillStyle = "#0f0"; // 设置字体内容，以及在画布上的位置 ctx.fillText("hello base64", 10, 30); // 描边颜色 ctx.strokeStyle = "#0f0"; // 绘制空心字 ctx.strokeText("hello base64", 10, 80); // 获取 Data URL document.getElementById('testCanvas-content').value = canvas.toDataURL();}使用FileReader API的readAsDataURL方法
FileReader API提供的readAsDataURL方法能够返回一个基于base64编码的Data URL。
如下所示，选择文件后返回Data URL。
注意，别选大的文件，选个小的试试就行，LOL。
Html:
<div class="demo-area"> <input type="file" id="testReadAsDataURL"> <textarea id="testReadAsDataURL-content"></textarea> </div>
JS:
var reader = new FileReader() reader.onload = function(e) { var textarea = document.getElementById('testReadAsDataURL-content'); textarea.value = reader.result } document.getElementById('testReadAsDataURL').onchange = function(e) { var file = e.target.files[0] reader.readAsDataURL(file) }4. Data URL能用在何处呢？
最开始已经说了Data URL，是以data:模式为前缀的URL，使用场合与常规URL相同，即常规URL能够使用的场合，Data URL也可以使用。如：浏览器地址栏、link中引入css文件、script中引入js文件、img src中引入图片、video中引入视频、iframe中引入网页、css background url引入背景。
在浏览器地址栏中使用Data URL
在浏览器地址栏中使用Data URL，打开上述canvas中绘制的内容
注意：chrome 从56开始将Data URL标记为“不安全”，从60开始屏蔽从页面打开的 Data URI 网址，可以右键新标签打开。详情(http://www.cnblogs.com/ziyunfei/p/6753002.html)
Html:
<a href="base64内容" target="_blank" id="setDataURLInHref"></a>
在script/img/video/iframe等标签的src属性内使用Data URL
以在script中使用Data URL为例（在原文中点击按钮之后，会弹出alert，alert的内容通过Data URL设定）：
JS:
var scriptDataURL = `data:text/javascript;base64,YWxlcnQoJ+WcqHNjcmlwdOS4reS9v+eUqERhdGEgVVJMJykK`// 对应文本为：alert('在script中使用Data URL')$('#setDataURLInScriptBtn').click(function() { $('<script>').attr('src', scriptDataURL).appendTo($('body'))})在<link>标签的href中使用Data URL
如下图，看在原文中点击按钮，会发现按钮中文字的颜色变成了红色，样式通过Data URL设定。
JS:
var linkDataURL = `data:text/css;base64,I3NldERhdGFVUkxJbkxpbmtCdG57Y29sb3I6IHJlZDt9Cg==`// 对应内容为：setDataURLInLinkBtn{color: red;}$('#setDataURLInLinkBtn').click(function() { $('<link rel="stylesheet" type ="text/css">').attr('href', linkDataURL).appendTo($('head'))})在css样式background的url中使用Data URL
执行下面代码，会将上面Canvas创建的图片的Data URL作为背景展示。
JS:
const bgDataURL = $('#testCanvas-content')[0].value$('#setDataURLInBG').css('background-image', `url(${bgDataURL})`)
