Base64 编码解码

可以选择图片文件来获取它的 Base64 编码的 DataURI 形式:
图片后缀:
请在上方第一个文本框中输入要编码/解码的字符。
设置(为了使浏览器能够记住设置,请开启 Cookie)
设置字符集编码。GB2312 无法使用 16 进制输出功能。
设置 Base64 解码后输出的形式。
如果设置字符集编码为 GB2312, 则此设置无效。
加空格:\u5728\u4F7F\u7528\u5728 \u4F7F \u7528
设置 Base64 编码输入的的形式。
如果设置字符集编码为 GB2312, 则此设置无效。
设置 Base64 编码后输出的格式,其中 URL 编码使用 encodeURIComponent 函数完成。
将编码结果中的特殊符号( +、/、=)替换为别的内容。
解码时也替换:在解码之前,先对待解码的文本逆向进行上述勾选的替换规则一遍。
Base64编码介绍

Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,大家可以查看RFC2045~RFC2049,上面有MIME的详细规范。Base64编码可用于在HTTP环境下传递较长的标识信息。

例如,在Java Persistence系统Hibernate中,就采用了Base64来将一个较长的唯一标识符(一般为128-bit的UUID)编码为一个字符串,用作HTTP表单和HTTP GET URL中的参数。在其他应用程序中,也常常需要把二进制数据编码为适合放在URL(包括隐藏表单域)中的形式。此时,采用Base64编码具有不可读性,即所编码的数据不会被人用肉眼所直接看到。

Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,大家可以查看RFC2045~RFC2049,上面有MIME的详细规范。Base64编码可用于在HTTP环境下传递较长的标识信息。例如,在Java Persistence系统Hibernate中,就采用了Base64来将一个较长的唯一标识符(一般为128-bit的UUID)编码为一个字符串,用作HTTP表单和HTTP GET URL中的参数。在其他应用程序中,也常常需要把二进制数据编码为适合放在URL(包括隐藏表单域)中的形式。此时,采用Base64编码具有不可读性,即所编码的数据不会被人用肉眼所直接看到。

Base64编码要求把3个8位字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两个0,形成8位一个字节的形式。 如果剩下的字符不足3个字节,则用0填充,输出字符使用'=',因此编码后输出的文本末尾可能会出现1或2个'='。

Base64使用注意问题

一、Base64和URL传参问题

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

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

二、Base64和URL传参问题改善

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

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

三、Base64转换后比原有的字符串长1/3

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

四、Base64转换总结

Base64转换,最好是不要用在加密上,尤其是参数加密,很容易出问题。

图片转Base64使用说明

// Base64 在CSS中的使用
.box{
  background-image: url("data:image/jpg;base64,/9j/4QMZR...");
}
// Base64 在HTML中的使用
<img src="data:image/jpg;base64,/9j/4QMZR..." />

经过Base64 编码后的文件体积一般比源文件大 30% 左右。

支持Base64(DataURI)的浏览器

Chrome 4+
Android Chrome 57+
Firefox 2+
Android Firefox 52+
Safari 3.1+
IOS Safari 3.2+
Opera 9+Opera9~11 限制为 64K
IE 8+IE8 限制为 32KB
Mobile IE10+
Edge12+
Android UC11+
QQ Browser1.2+