BASE64编码简介
1. 简介
BASE64是一种常用的可逆编码形式，常用于把二进制编码转换为字符形式的数据。编码后的字符串包含a-z、A-Z、0-9、+、/，共64个字符。64个字符需要用6位来表示，从0开始表示成数字0-63。【其实共有65个字符，“=”是填充字符，后面会说到。】
| 码值 | 字符 | 码值 | 字符 | 码值 | 字符 | 码值 | 字符 |
| 0 | A | 16 | Q | 32 | g | 48 | w |
| 1 | B | 17 | R | 33 | h | 49 | x |
| 2 | C | 18 | S | 34 | i | 50 | y |
| 3 | D | 19 | T | 35 | j | 51 | z |
| 4 | E | 20 | U | 36 | k | 52 | 0 |
| 5 | F | 21 | V | 37 | l | 53 | 1 |
| 6 | G | 22 | W | 38 | m | 54 | 2 |
| 7 | H | 23 | X | 39 | n | 55 | 3 |
| 8 | I | 24 | Y | 40 | o | 56 | 4 |
| 9 | J | 25 | Z | 41 | p | 57 | 5 |
| 10 | K | 26 | a | 42 | q | 58 | 6 |
| 11 | L | 27 | b | 43 | r | 59 | 7 |
| 12 | M | 28 | c | 44 | s | 60 | 8 |
| 13 | N | 29 | d | 45 | t | 61 | 9 |
| 14 | O | 30 | e | 46 | u | 62 | + |
| 15 | P | 31 | f |
此时，长度为3个字节的数据经过编码后就会变成4个字节。
2. 举例
例1 ：常规情况
如：字符串“QUT”经过编码后就会变成“UVVU”。
| Q | U | T | |||||||||||||||||||||
| 0 | 1 | 0 | 1 | 0 | 0 | 0 | 1 | 0 | 1 | 0 | 1 | 0 | 1 | 0 | 1 | 0 | 1 | 0 | 1 | 0 | 1 | 0 | 0 |
| U | V | V | U | ||||||||||||||||||||
例2 ：结果包含等号的情况
长度为3的字节数位数为3×8=24，刚好可以分成6×4。但如果数据的字节数不是3的倍数，则其位数就不是6的倍数，那么需要就不能精确地划分成6位的块。此时，需在原数据后面添加1个或2个零值字节，使其字节数是3的倍数。然后，在编码后的字符串后面添加1个或2个等号“=”，用以表示所添加的零值字节数。
如：字符串“QU”经过编码后就会变成“UVU=”。
| Q | U | ||||||||||||||||||||||
| 0 | 1 | 0 | 1 | 0 | 0 | 0 | 1 | 0 | 1 | 0 | 1 | 0 | 1 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| U | V | U | = | ||||||||||||||||||||
如：字符串“Q”经过编码后就会变成“UQ==”。
| Q | |||||||||||||||||||||||
| 0 | 1 | 0 | 1 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| U | Q | = | = | ||||||||||||||||||||
3. 用途
BASE64加密常用于HTML内嵌Base64编码图片。
前端在实现页面时，对于一些简单图片，通常会选择将图片内容直接内嵌在页面中，避免不必要的外部资源加载，增大页面加载时间，但是图片数据是二进制数据，该怎么嵌入呢？绝大多数现代浏览器都支持一种名为Data URLs的特性，允许使用BASE64对图片或其他文件的二进制数据进行编码，将其作为文本字符串嵌入网页中。以百度搜索首页为例，其中语音搜索的图标是个背景图片，其内容以Data URLs形式直接写在CSS中，这个css内容又直接嵌在HTML页面。
Data URLs 格式为：url(data:文件类型;编码方式,编码后的文件内容)。但如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为其BASE64编码后的字符串非常大，会明显增大HTML页面，影响加载速度。