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来表示图片,防止路径或链接的失效。
- 1
- 2