关于base64编码的原理及实现方法分享

更新时间：2012年03月01日 20:18:07 作者：

我们的图片大部分都是可以转换成base64编码的data：image。这个在将canvas保存为img的时候尤其有用

一、Base64编码原理

步骤1：将所有字符转化为ASCII码；
步骤2：将ASCII码转化为8位二进制；
步骤3：将二进制3个归成一组(不足3个在后边补0)共24位，再拆分成4组，每组6位；
步骤4：统一在6位二进制前补两个0凑足8位；
步骤5：将补0后的二进制转为十进制；
步骤6：从Base64编码表获取十进制对应的Base64编码；

说明：不足3个补0的最终Base64编码为=，而不是A！

二、Base64编码示例

示例一：zyq对应Base64编码为enlx

示例二：mzwu对应Base64编码为bXp3dQ==

虽然除ie外，大部分现代浏览器都已经支持原生的基于base64的encode和decode，例如btoa和atob。（将canvas画布保存成img并强制改变mimetype进行下载，会在下一篇记录）

但是处于好奇心，还是驱使我去了解下base64编码的原理。以便也在不支持原生base64编码的ie下可以得以实现。

【Base64】
-base64的编码都是按字符串长度，以每3个8bit的字符为一组，
-然后针对每组，首先获取每个字符的ASCII编码，
-然后将ASCII编码转换成8bit的二进制，得到一组3*8=24bit的字节
-然后再将这24bit划分为4个6bit的字节，并在每个6bit的字节前面都填两个高位0，得到4个8bit的字节
-然后将这4个8bit的字节转换成10进制，对照Base64编码表（下表），得到对应编码后的字符。

（注：1. 要求被编码字符是8bit的，所以须在ASCII编码范围内，\u0000-\u00ff，中文就不行。
　　　2. 如果被编码字符长度不是3的倍数的时候，则都用0代替，对应的输出字符为=）

Base64 编码表
Value	Char	Value	Char	Value	Char	Value	Char
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	47	v	63	/

比如举下面2个例子：
a) 字符长度为能被3整除时：比如“Tom” ：

复制代码代码如下:

T           o           m
ASCII:      84          111         109
bit字节:   01010100    01101111    01101101
bit字节:     010101      000110      111101      101101
十进制:     21          6           61          45
对应编码:   V           G           9           t

所以，btoa('Tom') = VG9t
b) 字符串长度不能被3整除时，比如“Lucy”：

复制代码代码如下:

L           u           c           y
ASCII:      76          117         99          121
bit字节:   01001100    01110101    01100011    01111001      00000000    00000000
bit字节:     010011      000111      010101      100011      011110  010000  000000  000000
十进制:     19          7           21          35             30      16      (异常) (异常)      
对应编码:   T           H           V           j               e       Q       =       =

由于Lucy只有4个字母，所以按3个一组的话，第二组还有两个空位，所以需要用0来补齐。这里就需要注意，因为是需要补齐而出现的0，所以转化成十进制的时候就不能按常规用base64编码表来对应，所以不是a，可以理解成为一种特殊的“异常”，编码应该对应“=”。
有了上面的理论，那我们实现一个base64编码就容易了。

复制代码代码如下:

/**
 * base64 encoding & decoding
 * for fixing browsers which don't support Base64 | btoa |atob
 */
(function (win, undefined) {
     var Base64 = function () {
        var base64hash = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
        // btoa method
        function _btoa (s) {
            if (/([^\u0000-\u00ff])/.test(s)) {
                throw new Error('INVALID_CHARACTER_ERR');
            }    
            var i = 0,
                prev,
                ascii,
                mod,
                result = [];
            while (i < s.length) {
                ascii = s.charCodeAt(i);
                mod = i % 3;
                switch(mod) {
                    // 第一个6位只需要让8位二进制右移两位
                    case 0:
                        result.push(base64hash.charAt(ascii >> 2));
                        break;
                    //第二个6位 = 第一个8位的后两位 + 第二个8位的前4位
                    case 1:
                        result.push(base64hash.charAt((prev & 3) << 4 | (ascii >> 4)));
                        break;
                    //第三个6位 = 第二个8位的后4位 + 第三个8位的前2位
                    //第4个6位 = 第三个8位的后6位
                    case 2:
                        result.push(base64hash.charAt((prev & 0x0f) << 2 | (ascii >> 6)));
                        result.push(base64hash.charAt(ascii & 0x3f));
                        break;
                }
                prev = ascii;
                i ++;
            }
            // 循环结束后看mod, 为0 证明需补3个6位，第一个为最后一个8位的最后两位后面补4个0。另外两个6位对应的是异常的“=”；
            // mod为1，证明还需补两个6位，一个是最后一个8位的后4位补两个0，另一个对应异常的“=”
            if(mod == 0) {
                result.push(base64hash.charAt((prev & 3) << 4));
                result.push('==');
            } else if (mod == 1) {
                result.push(base64hash.charAt((prev & 0x0f) << 2));
                result.push('=');
            }
            return result.join('');
        }
        // atob method
        // 逆转encode的思路即可
        function _atob (s) {
            s = s.replace(/\s|=/g, '');
            var cur,
                prev,
                mod,
                i = 0,
                result = [];
            while (i < s.length) {
                cur = base64hash.indexOf(s.charAt(i));
                mod = i % 4;
                switch (mod) {
                    case 0:
                        //TODO
                        break;
                    case 1:
                        result.push(String.fromCharCode(prev << 2 | cur >> 4));
                        break;
                    case 2:
                        result.push(String.fromCharCode((prev & 0x0f) << 4 | cur >> 2));
                        break;
                    case 3:
                        result.push(String.fromCharCode((prev & 3) << 6 | cur));
                        break;
                }
                prev = cur;
                i ++;
            }
            return result.join('');
        }
        return {
            btoa: _btoa,
            atob: _atob,
            encode: _btoa,
            decode: _atob
        };
    }();
    if (!win.Base64) { win.Base64 = Base64 }
    if (!win.btoa) { win.btoa = Base64.btoa }
    if (!win.atob) { win.atob = Base64.atob }
 })(window)

Base64 example

您可能感兴趣的文章:

在IDEA（2020.2）中配置Git及使用Git的图文详解
这篇文章主要介绍了在IDEA（2020.2）中配置Git及使用Git的图文详解,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-12-12
VS2019属性配置详解
这篇文章主要介绍了VS2019属性配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
超全整理visual studio快捷键使用技巧
这篇文章主要为大家介绍了整理超全的visual studio快捷键使用技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-02-02
解析动态代理jdk的Proxy与spring的CGlib(包括区别介绍)
Spring是Java程序员基本不可能绕开的一个框架，它的核心思想是IoC(控制反转)和AOP(面向切面编程)。本文重点给大家介绍动态代理jdk的Proxy与spring的CGlib，感兴趣的朋友跟随小编一起看看吧
2022-01-01
接口数据安全保证的10种方式
这篇文章主要为大家介绍了接口数据安全保证的10种方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
从此不再惧怕URI编码 JavaScript及C# URI编码详解
JavaScript中的还好，只提供了三个，C#中主要用的就有这么多，还没有列出其他编码(HTML)，一多就弄不明白，弄不明白就心生恐惧，心生恐惧就变得苦逼，本文就向大家详细解释在JavaScript及C#中如何对URI进行编码的方法(注：本文不涉及到其他编码)。
2012-03-03
关于ANSI转义序列解读
这篇文章主要介绍了关于ANSI转义序列的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-08-08
Git基础学习之文件删除操作命令详解
这篇文章主要为大家详细介绍了Git基础学习中的文件删除操作命令，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以了解一下
2022-10-10
在地址栏里显示logo的实现方法
在地址栏里显示logo，其实大家可以看一些网站的头部里面，下面的方法讲的更仔细。
2009-02-02
使用sublime Text3过程中的各种问题的解决
本文主要介绍了使用sublime Text3过程中的各种问题的解决，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01