利用Data URL将小图片生成数据流形式

前言
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，下面将介绍如何巧妙的使用Data URL。

Data URL基本原理

图片在网页中的使用方法通常是下面这种利用img标记的形式：
<img src=“http://www.xxxx.net/img/1.png”/ //最后要加一个尖括号扩回去 删掉因为这又是一张图片

这种方式中，img标记的src属性指定了一个远程服务器上的资源。当网页加载到浏览器中时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求，占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着，如果一个网页里嵌入了过多的外部资源，这些请求会导致整个页面的加载延迟。而使用Data URL技术，图片数据以base64字符串格式嵌入到了页面中，与HTML成为一体，它的形式如下：

这个二维码。。。 本来是一串Data UR，CSDN直接转成图片了…

data:image/jpg; 声明数据协议及类型名称
base64, 编码形式为base64
/9j/4AAQSkZ…… base64编码结果

Data URL是在本地直接绘制图片，不是从服务器加载，所以节省了HTTP连接，起到加速网页的作用。

---

作者：学习爱我
来源：CSDN
原文：https://blog.csdn.net/pdsu161530247/article/details/75234835
版权声明：本文为博主原创文章，转载请附上博文链接！

原文链接以上