前端- Data URL

一、在网页中引入图片资源
当我们在网页中想要引用图片资源的时候，一般是使用如下的格式

<img src="images/myPicture.jpg ">

通过img标签的src属性，将本地资源或者是远程服务器资源下载下来在页面中显示，如果需要的是外部资源，则需要向服务器发送请求，这样就会占用网络资源，大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着，如果一个网页里嵌入了过多的外部资源，这些请求会导致整个页面的加载延迟。

二、Data URL 是什么

Data URL，是以data:模式为前缀的URL，允许内容的创建者将较小的文件嵌入到文档中。与常规的URL使用场合类似
Data URL由data:前缀、MIME类型（表明数据类型）、base64标志位（如果是文本，则可选）以及数据本身四部分组成。

语法格式如下：

  data:[<mediatype>][;base64],data

mediatype是一个MIME（Multipurpose Internet Mail Extension）类型字符串，如image/jpeg表示一个JPEG图片文件。如果省略，默认值为text/plain;charset=US-ASCII

三、Data URL的用处

Data URL，使用场合与常规URL相同，即常规URL能够使用的场合，Data URL也可以使用。如：浏览器地址栏、link中引入css文件、script中引入js文件、img src中引入图片、video中引入视频、iframe中引入网页、css background url引入背景

如： 在浏览器地址栏中使用Data URL

<a href="data:image/jpeg;base64,/9j/xxxx..." target="_blank" id="picture"></a>

四、Data URL的优缺点

1. 优点

• 当访问外部资源很麻烦或受限时
• 当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时
• 当图片的体积太小，占用一个HTTP会话不是很值得时

2. 缺点

• Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的 图片会比二进制格式的图片体积大1/3
• Data URL形式的图片不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候

五、如何优化 Data URL

Data URL 最大的问题就是无法缓存，每次重新进入页面都需要重新加载，那么能否有方法将 Data URL 放入到浏览器缓存中呢，这个方法就是 - 通过CSS 样式
在 CSS 文件中 通过 background-image: url() 属性加载图片，这样Data URL形式的图片就会存储在CSS样式表中，进而达到将图片缓存在浏览器中的目的。

六、如何获得 Data URL 编码

1. Javascript中有两个函数负责编码和解码base64字符串，分别是atob和btoa，两者都只针对Data URL中的data进行处理
   1. atob(): 负责解码已经使用base64编码了的字符串
   2. btoa(): 将二进制字符串转为base64编码的ASCII字符串
2. Canvas的toDataURL方法
   Canvas提供了toDataURL方法，用于获取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();
}

3. 使用FileReader API的readAsDataURL方法
   FileReader API提供的readAsDataURL方法能够返回一个基于base64编码的Data URL

// 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)
}

七、总结
自我感觉，Data URL 的最好的用处就是，有一些代码片段是由后端生成的，这种情况就不方便引入外部资源，直接用Data URL加载图片是最好的选择，另外，使用 Data URL 加载的图片和用外部资源加载的图片是一样的，区别就是，一个是加载一段代码，一个是加载图片，说不准哪个浏览器处理效率高。

八、参考链接：
http://www.xuechenlei.com/2016/10/data-url-introduction-advantages-disadvantages/
http://verymuch.site/2017/12/14/Data-URL简介与使用/
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs