Introduction

Data URL

Data URL Scheme–允许我们使用inline-code方式在网页中包含数据, 从而将一些小数据, 直接嵌入到
网页中, 从而不用从外部文件载入, 一般用于图片.

其中传统的图片使用: <img src="images/image.png">方式来加载资源并显示, 而在Data URL中内嵌的
图片则使用: <img src="data:image/png;base64,图片编码">方式来直接显示图片, 省略了图片的加载.

即DATA URL直接使用URL传递方式来内嵌图片.

Advantage

优点:

  • 减少资源的请求链接数
  • 访问外部资源受限时, 使用Data URL可以达到很好的效果

缺点:

  • Data URL形式的图片不会被浏览器缓存,这意味着每次访问这样页面时都被下载一次
  • Base64编码的数据体积通常是原数据的体积4/3
  • 在移动端性能可能偏低

对于缓存问题, 可以使用在css文件的background-image样式规则使用Data URI Scheme, 从而跟随CSS文件
一起被浏览器缓存.

Scenarios

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

Format

Format

整个URL格式: data:[<mime type>][;charset=<charset>][;<encoding>],<encoded data>, 其中

  • data: 协议名称
  • mime type: 数据类型(img/png, text/plain等), 可选字段
  • charset: 源文本的字符编码方式, 可选项
  • encoding: 数据编码方式, 默认US-ASCII, BASE64两种
  • encoded data: 编码后的数据

Type

目前支持的URL Scheme类型:

  • data:,文本数据
  • data:text/plain,文本数据
  • data:text/html,HTML代码
  • data:text/html;base64,base64编码的HTML代码
  • data:text/css,CSS代码
  • data:text/css;base64,base64编码的CSS代码
  • data:text/javascript,Javascript代码
  • data:text/javascript;base64,base64编码的Javascript代码
  • data:image/gif;base64,base64编码的gif图片数据
  • data:image/png;base64,base64编码的png图片数据
  • data:image/jpeg;base64,base64编码的jpeg图片数据
  • data:image/x-icon;base64,base64编码的icon图片数据

Example

下面以一个python例子来讲解使用requests来进行图片的读取, 上传.

1
2
3
4
5
6
7
8
9
10
import requests
import base64

url = 'http://127.0.0.1:5000/dama/file'

text = 'data:image/png;base64,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'

files = {'file': base64.b64decode(text.split(',', 1)[-1])}
data = {'type': 'upload'}
rsp = requests.post(url, data=data, files=files)