base64编码的原理及实现

矫情吗；* 2022-03-29 12:08 221阅读 0赞

base64编码的原理及实现

我们的图片大部分都是可以转换成base64编码的data：image。 这个在将canvas保存为img的时候尤其有用。虽然除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 编码表  
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  
8bit字节: 01010100 01101111 01101101  
6bit字节: 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  
8bit字节: 01001100 01110101 01100011 01111001 00000000 00000000  
6bit字节: 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编码就容易了。

1 /**
      2 * base64 encoding & decoding
      3 * for fixing browsers which don't support Base64 | btoa |atob
      4 */
      5 
      6 (function (win, undefined) {
      7 
      8 var Base64 = function () {
      9 var base64hash = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
     10 
     11 // btoa method
     12 function _btoa (s) {
     13 if (/([^\u0000-\u00ff])/.test(s)) {
     14 throw new Error('INVALID_CHARACTER_ERR');
     15 } 
     16 var i = 0,
     17 prev,
     18 ascii,
     19 mod,
     20 result = [];
     21 
     22 while (i < s.length) {
     23 ascii = s.charCodeAt(i);
     24 mod = i % 3;
     25 
     26 switch(mod) {
     27 // 第一个6位只需要让8位二进制右移两位
     28 case 0:
     29 result.push(base64hash.charAt(ascii >> 2));
     30 break;
     31 //第二个6位 = 第一个8位的后两位 + 第二个8位的前4位
     32 case 1:
     33 result.push(base64hash.charAt((prev & 3) << 4 | (ascii >> 4)));
     34 break;
     35 //第三个6位 = 第二个8位的后4位 + 第三个8位的前2位
     36 //第4个6位 = 第三个8位的后6位
     37 case 2:
     38 result.push(base64hash.charAt((prev & 0x0f) << 2 | (ascii >> 6)));
     39 result.push(base64hash.charAt(ascii & 0x3f));
     40 break;
     41 }
     42 
     43 prev = ascii;
     44 i ++;
     45 }
     46 
     47 // 循环结束后看mod, 为0 证明需补3个6位，第一个为最后一个8位的最后两位后面补4个0。另外两个6位对应的是异常的“=”；
     48 // mod为1，证明还需补两个6位，一个是最后一个8位的后4位补两个0，另一个对应异常的“=”
     49 if(mod == 0) {
     50 result.push(base64hash.charAt((prev & 3) << 4));
     51 result.push('==');
     52 } else if (mod == 1) {
     53 result.push(base64hash.charAt((prev & 0x0f) << 2));
     54 result.push('=');
     55 }
     56 
     57 return result.join('');
     58 }
     59 
     60 // atob method
     61 // 逆转encode的思路即可
     62 function _atob (s) {
     63 s = s.replace(/\s|=/g, '');
     64 var cur,
     65 prev,
     66 mod,
     67 i = 0,
     68 result = [];
     69 
     70 while (i < s.length) {
     71 cur = base64hash.indexOf(s.charAt(i));
     72 mod = i % 4;
     73 
     74 switch (mod) {
     75 case 0:
     76 //TODO
     77 break;
     78 case 1:
     79 result.push(String.fromCharCode(prev << 2 | cur >> 4));
     80 break;
     81 case 2:
     82 result.push(String.fromCharCode((prev & 0x0f) << 4 | cur >> 2));
     83 break;
     84 case 3:
     85 result.push(String.fromCharCode((prev & 3) << 6 | cur));
     86 break;
     87 
     88 }
     89 
     90 prev = cur;
     91 i ++;
     92 }
     93 
     94 return result.join('');
     95 }
     96 
     97 return {
     98 btoa: _btoa,
     99 atob: _atob,
    100 encode: _btoa,
    101 decode: _atob
    102 };
    103 }();
    104 
    105 if (!win.Base64) { win.Base64 = Base64 }
    106 if (!win.btoa) { win.btoa = Base64.btoa }
    107 if (!win.atob) { win.atob = Base64.atob }
    108 
    109 })(window)

发表评论取消回复

表情：

评论列表（有 0 条评论，221人围观）

还没有评论，来说两句吧...

相关阅读

相关 Base64编码原理分析

文章目录一、认识（一）认识（二）计算（1）规则（2）示例（3）

布满荆棘的人生/ 2023年01月16日 06:21/ 0 赞/ 232 阅读

相关密码算法原理与实现：Base64编码

> 本文转自网络文章，内容均为非盈利，版权归原作者所有。 > 转载此文章仅为个人收藏，分享知识，如有侵权，马上删除。 > > 原文作者：QiuJYu > 原文地址：[

浅浅的花香味﹌/ 2022年12月02日 13:53/ 0 赞/ 174 阅读

相关 Base64编码原理

遇到的问题：将昵称设置为表情符入库时出错，原因：数据库编码格式为utf-8. 解决方案： 1、将数据库编码格式改为utf8mb4；（该方法不太好，需要修改数据库编码格式）

淡淡的烟草味﹌/ 2022年07月14日 07:28/ 0 赞/ 180 阅读

相关 Base64 编码介绍、Base64编码转换原理、算法

Base64编码，是我们程序开发中经常使用到的编码方法。它是一种基于用64个可打印字符来表示二进制数据的表示方法。它通常用作存储、传输一些二进制数据编码方法！也是MIME（多用

深藏阁楼爱情的钟/ 2022年07月11日 06:57/ 0 赞/ 251 阅读

相关 Base64编码解码原理详解

Base64编码解码原理详解 1. Base64字符的组成部分 > Base64所用字符： 0,1,2 ….9 A,B,C,D…Z a,b,c,d…z + /

墨蓝/ 2022年06月16日 08:18/ 0 赞/ 392 阅读

相关 Base64编码

开发者对Base64编码肯定很熟悉，是否对它有很清晰的认识就不一定了。实际上Base64已经简单到不能再简单了，如果对它的理解还是模棱两可实在不应该。大概介绍一下

小鱼儿/ 2022年06月01日 06:41/ 0 赞/ 281 阅读

相关 base64编码的原理及实现

base64编码的原理及实现我们的图片大部分都是可以转换成base64编码的data：image。这个在将canvas保存为img的时候尤其有用。虽然除ie外，大部分现代

矫情吗；*/ 2022年03月29日 12:08/ 0 赞/ 222 阅读

相关 Base64的编码原理

这里可能需要借助一些在线工具，例如系统编码的AsciI码对照表，例如我的就是gb2312的，具体查看自己系统编码可以cmd下输入chcp得到一组数字后去编码对照表查找，还有就是

古城微笑少年丶/ 2022年03月11日 12:42/ 0 赞/ 215 阅读

相关弄懂Base64编码原理

最近生成密钥对使用Base64进行编码的，就学习了一下，下面是简单介绍：目前Base64已经成为网络上常见的传输8Bit字节代

我就是我/ 2022年01月28日 17:21/ 0 赞/ 285 阅读

相关 JavaScript实现base64编码

> 原文地址：[https://www.cnblogs.com/mofish/archive/2012/02/25/2367858.html][https_www.cnblog

左手的ㄟ右手/ 2022年01月06日 08:35/ 0 赞/ 263 阅读