html image -- data:image/png;base64

1, data:image/png;base64

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg" alt="image"></img>

 </body>

</html>

能够把上面 src 中的url 直接copy到浏览器地址栏中。

Data URI scheme是在RFC2397中定义的。目的是将一些小的数据。直接嵌入到网页中，从而不用再从外部文件加载。

比方上面那串字符，事实上是一张小图片。将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。

　　在上面的Data URI中。data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。

　　眼下，Data URI 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图片数据

　　base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符。网上有非常多免费的base64 编码和解码的工具。在PHP中能够用函数base64_encode() 进行编码。如echo base64_encode(file_get_contents(‘wg.png’));

眼下，IE8、Firfox、Chrome、Opera浏览器都支持这样的小文件嵌入。

2, Base64简单介绍

标准的Base64并不适合直接放在URL里传输。由于URL编码器会把标准Base64中的“/”和“+”字符变为形如“%XX”的形式。而这些“%”号在存入数据库时还须要再进行转换，由于ANSI SQL中已将“%”号用作通配符。

为解决此问题，可採用一种用于URL的改进Base64编码。它不在末尾填充'='号，并将标准Base64中的“+”和“/”分别改成了“_”和“-”，这样就免去了在URL编解码和数据库存储时所要作的转换，避免了编码信息长度在此过程中的添加，并统一了数据库、表单等处对象标识符的格式。

另有一种用于正則表達式的改进Base64变种。它将“+”和“/”改成了“!”和“-”，由于“+”,“*”以及前面在IRCu中用到的“[”和“]”在正則表達式中都可能具有特殊含义。

此外另一些变种，它们将“+/”改为“_-”或“._”（用作编程语言中的标识符名称）或“.-”（用于XML中的Nmtoken）甚至“_:”（用于XML中的Name）。

Base64要求把每三个8Bit的字节转换为四个6Bit的字节（3*8 = 4*6 = 24）。然后把6Bit再添两位高位0，组成四个8Bit的字节。也就是说，转换后的字符串理论上将要比原来的长1/3。

规则

关于这个编码的规则：

①.把3个字符变成4个字符。

②每76个字符加一个换行符。

③.最后的结束符也要处理。

这样说会不会太抽象了？不怕，我们来看一个样例：

转换前 11111111, 11111111, 11111111 （二进制）

转换后 00111111, 00111111, 00111111, 00111111 （二进制）

应该非常清楚了吧？上面的三个字节是原文，以下的四个字节是转换后的Base64编码。其前两位均为0。

转换后，我们用一个码表来得到我们想要的字符串（也就是终于的Base64编码），这个表是这种：（摘自RFC2045）

转换表

Table 1: The Base64 Alphabet

索引	相应字符	索引	相应字符	索引	相应字符	索引	相应字符
0	A	17	R	34	i	51	z
1	B	18	S	35	j	52	0
2	C	19	T	36	k	53	1
3	D	20	U	37	l	54	2
4	E	21	V	38	m	55	3
5	F	22	W	39	n	56	4
6	G	23	X	40	o	57	5
7	H	24	Y	41	p	58	6
8	I	25	Z	42	q	59	7
9	J	26	a	43	r	60	8
10	K	27	b	44	s	61	9
11	L	28	c	45	t	62	+
12	M	29	d	46	u	63	/
13	N	30	e	47	v
14	O	31	f	48	w
15	P	32	g	49	x
16	Q	33	h	50	y

举例

让我们再来看一个实际的样例，加深印象。

转换前 10101101,10111010,01110110

转换后 00101011, 00011011 ,00101001 ,00110110

十进制 43 27 41 54

相应码表中的值 r b p 2

所以上面的24位编码，编码后的Base64值为 rbp2

解码同理，把 rbq2 的二进制位连接上再重组得到三个8位值，得出原码。

（解码仅仅是编码的逆过程，在此我就不多说了，另外有关MIME的RFC还是有非常多的，假设须要具体情况请自行查找。）

第一个字节，依据源字节的第一个字节处理。

规则：源第一字节右移两位。去掉低2位，高2位补零。

既：00 + 高6位

第二个字节，依据源字节的第一个字节和第二个字节联合处理。

规则例如以下，第一个字节高6位去掉然后左移四位。第二个字节右移四位

即：源第一字节低2位 + 源第2字节高4位

第三个字节。依据源字节的第二个字节和第三个字节联合处理，

规则第二个字节去掉高4位并左移两位（得高6位），第三个字节右移6位并去掉高6位（得低2位），相加就可以

第四个字节，规则，源第三字节去掉高2位就可以

依据base64的编码规则，每76个字符须要一个换行

//用更接近于编程的思维来说，编码的过程是这种：

//第一个字符通过右移2位获得第一个目标字符的Base64表位置，依据这个数值取到表上对应的字符，就是第一//个目标字符。

//然后将第一个字符与0xfc(11111100)进行与(&)操作并左移4位,接着第二个字符右移4位与前者相加，即获得第二个目标字符。

//再将第二个字符与0x0f(00001111)进行与(&)操作并左移2位,接着第三个字符右移6位与前者相加，获得第三个目标字符。

//最后取第三个字符的右6位即获得第四个目标字符。

//在以上的每个步骤之后，再把结果与 0x3F 进行 AND 位操作，就能够得到编码后的字符了。

但是等等……聪明的你可能会问到，原文的字节数量应该是3的倍数啊。假设这个条件不能满足的话，那该怎么办呢？

我们的解决的方法是这种：原文剩余的字节依据编码规则继续单独转(1变2,2变3;不够的位数用0补全)，再用=号补满4个字节。这就是为什么有些Base64编码会以一个或两个等号结束的原因，但等号最多仅仅有两个。由于：

余数 = 原文字节数 MOD 3

所以余数不论什么情况下都仅仅可能是0，1，2这三个数中的一个。

假设余数是0的话。就表示原文字节数正好是3的倍数（最理想的情况啦）。假设是1的话。转成2个Base64编码字符，为了让Base64编码是4的倍数。就要补2个等号；同理，假设是2的话，就要补1个等号。

在MIME格式的电子邮件中，base64能够用来将binary的字节序列数据编码成ASCII字符序列构成的文本。使用时，在传输编码方式中指定base64。使用的字符包含大写和小写字母各26个，加上10个数字，和加号“+”，斜杠“/”，一共64个字符。等号“=”用来作为后缀用途。

完整的base64定义可见 RFC1421和 RFC2045。

编码后的数据比原始数据略长。为原来的4/3。在电子邮件中。依据RFC822规定，每76个字符。还须要加上一个回车换行。

能够估算编码后数据长度大约为原长的135.1%。

转换的时候。将三个byte的数据，先后放入一个24bit的缓冲区中，先来的byte占高位。数据不足3byte的话，于缓冲区中剩下的Bit用0补足。然后，每次取出6个bit，依照其值选择ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/中的字符作为编码后的输出。不断进行，直到所有输入数据转换完毕。

假设最后剩下两个输入数据，在编码结果后加1个“=”；假设最后剩下一个输入数据，编码结果后加2个“=”；假设没有剩下不论什么数据，就什么都不要加。这样才干够保证资料还原的正确性。

举例来说。一段引用自Thomas Hobbes's Leviathan的文句：

Man is distinguished, not only by his reason, but by this singular passion from other animals, which is a lust of the mind, that by a perseverance of delight in the continued and indefatigable generation of knowledge, exceeds the short vehemence of any carnal
pleasure.

经过base64编码之后变成：

TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb24sIGJ1dCBieSB0aGlz

IHNpbmd1bGFyIHBhc3Npb24gZnJvbSBvdGhlciBhbmltYWxzLCB3aGljaCBpcyBhIGx1c3Qgb2Yg

dGhlIG1pbmQsIHRoYXQgYnkgYSBwZXJzZXZlcmFuY2Ugb2YgZGVsaWdodCBpbiB0aGUgY29udGlu

dWVkIGFuZCBpbmRlZmF0aWdhYmxlIGdlbmVyYXRpb24gb2Yga25vd2xlZGdlLCBleGNlZWRzIHRo

ZSBzaG9ydCB2ZWhlbWVuY2Ugb2YgYW55IGNhcm5hbCBwbGVhc3VyZS4=