data:text/html;c,html image -- data:image/png;base64
1, data:image/png;base64
能够把上面 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=
data:text/html;c,html image -- data:image/png;base64相关推荐
- 编码 data:text/html;c,javascript中Data URI使用详解
Data URI,不是URL URL是uniform resource locator的缩写,在web中的每一个可访问资源都有一个URL地址,例如图片,HTML文件,js文件以及style sheet ...
- 编码 data:text/html;c,关于 Data URI Scheme -- data:image/jpg;base64
转载一篇大神的文章 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...
- SAP LSMW 物料主数据Basic Data Text数据的导入
SAP LSMW 物料主数据Basic Data Text数据的导入 笔者所在的D项目上,业务要求每个物料主数据能有一个remark字段,用以在物料描述之外为物料做更多更详细的描述,比如一些备品备件物 ...
- data:text/html firefox钓鱼,JS DataURL 整理(一)
一.初识Data URL 数据URL是带有前缀的URL,data:可以将小文件直接嵌入文档中. data URL是一种特殊格式的url,它的前缀是data: data URL允许内容的创建者将小文件嵌 ...
- 编码 data text html c,谁说前端不需要懂二进制
作者:全栈成长之路 公号 / 山月行 作为一名前端,在工作中也会遇到很多有关二进制处理的需求,如 EXCEL 表格的导出,PDF 的生成,多个文件的打包,音频的处理. 从前后端整体上来说前端代表 UI ...
- CDS (W2) -- Features, Data, Text Processing
Features, Data, Text Processing 1. Features Examples of Features e.g. Home Type, Material Status, In ...
- 编码 data:text/html;c,[网页设计]图片base64编码利器:在线 Data URI 生成工具 – Duri.me...
这篇文章介绍一款在线的图片 base64 编码利器 - Duri.me.data URI 图片是 base64编码的图片文件,可以嵌入到 HTML 或者 CSS 文件中,能够减少 HTTP 请求,提高 ...
- STM32——.bss .data .text 与Code, RO-data , RW-data, ZI-data的关系
核心就是RAM和ROM的作用和区别 1 .bss .data .text 1.1 bss段: bss段(bss segment)通常是指用来存放程序中未初始化的全局变量的一块内存区域. bss是英文B ...
- 微信浏览器中iframe srcdoc、src=data:text/html,xxxx 等无法使用情况下防止样式污染的解决方案
业务需求 从后端取HTML 前端展示 要求 HTML不得被前台全局样式污染 解决方案 1.使用iframe 的 srcdoc <iframe srcdoc="<p>这是HT ...
最新文章
- python 多维数组删除重复
- SAP RFC user 最小权限
- crtsiii型无砟轨道板_无砟轨道裂缝破损怎么修补
- win10打开系统cmd面板(Powershell窗口) - 快捷键
- APUE学习笔记:第五章 标准I/O库
- 矩阵论第一章总结(思维导图)
- 教育部取消计算机语言,《永远不要说你已经尽力了》--清华生的讲座报告【转】...
- 如何安装Chrome OS系统
- realtek没有禁用前面板_为什么HD声卡必须禁用前面板插孔检测前置耳机和麦克才可以有声...
- 数学公式编辑器mathtype安装包免费版下载
- acwing 206 石头游戏 矩阵快速幂
- 有什么好的论文查重软件?两分钟让你知道
- js中appendChild()方法
- sklearn 中 predict 方法和 predict_proba 方法的区别和使用
- 语雀全新模板中心,你的创作锦囊
- android临时root权限获取失败,获取ROOT权限失败怎么办?
- 大脸猫讲逆向之ARM汇编中PC寄存器详解
- Excel指定列 拷贝相同的数据
- 图的深度优先遍历DPS邻接矩阵初始化
- 汽车诊断协议(K线/CAN总线、kwp2000、ISO14230、ISO1575...)
热门文章
- html鼠标跟随图片移动案例
- linux7.4邮件服务器,U-Mail邮件服务器For CentOS 7.X独立安装包教程
- Python并发编程之谈谈线程中的“锁机制”(三)
- Android OpenCv4 斑点检测,实现图片特征点绘制
- 京东弹性数据库之BinLake订阅服务
- Objective-C(十九、通知-消息发送模式之中的一个)——iOS开发基础
- httpclient connect timed out
- sqlite java框架_SQlite数据库框架:LitePal
- 修改EXCHANGE默认的收发邮件大小是10M
- 【密码学基础】混淆电路(Garbled Circuit)