我们的图片大部分都是可以转换成 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 代替，对应的输出字符为=）

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

所以，btoa('Tom') = VG9t

b) 字符串长度不能被 3 整除时，比如 “Lucy”：

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

有了上面的理论，那我们实现一个 base64 编码就容易了。

Base64 example