base64编码与Data URI scheme

base64编码与Data URI scheme

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,是一种基于64个可打印字符(‘A’~’Z’,’a’~’z’,’0’~’9’,以及两个符号视不同标准而不同共64个)来表示二进制数据的方法。可用于在HTTP环境下传递较长的标识信息。

具体而言,首先将数据解析成二进制,对于二进制串每6个为一组,再按照对应的映射规则将这6位二进制数据映射成可打印字符。当然这个过程是可逆的,也可以将Base64编码转换为原来的二进制。于是可以在HTTP中传递较长信息。

利用Python自带的base64库,如下几行code就可以将一张图片转换为base64编码:

import base64
fileName = "screenShot.png"
with open(fileName,'rb') as fp:
    ret=base64.b64encode(fp.read())
    print(ret)

javascript可以将文件转换为base64编码( 第2页有demo):

function encodeImageFileAsURL(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
  	console.log(reader.result);
  }
  reader.readAsDataURL(file);
}

在查看网页的源代码时,有时会在css中看到background-image不是一个路径,而是一串这样的字符:

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...")

这种以data:image/png;开头的标记信息是Data URI Scheme ,除了data:image/png之外,还支持其它的类型。Data URI Scheme语法为

data:[<mime type>][;charset=<charset>][;<encoding>],<encoded data>

  •   ①.  data :协议名称;
  •   ②.  [<mime type>] :可选项,数据类型(image/png、 text/plain等)
  •   ③.  [;charset=<charset>] :可选项,源文本的字符集编码方式
  •   ④.  [;<encoding>] :数据编码方式(默认US-ASCII,BASE64两种)
  •   ⑤.  ,<encoded data> :编码后的数据

目前DataURI 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图片数据

使用Data URI scheme会减少请求链接数,但是它不会被浏览器缓存。在markdown中也可以用base64编码采取Data URI scheme来表示图片,防止路径或链接的失效。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注