关于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 编码表

Value

Char

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

5

F

21

V

37

l

53

6

G

22

W

38

m

54

7

H

23

X

39

n

55

8

I

24

Y

40

o

56

9

J

25

Z

41

p

57

10

K

26

a

42

q

58

11

L

27

b

43

r

59

12

M

28

c

44

s

60

13

N

29

d

45

t

61

14

O

30

e

46

u

62

+

15

P

31

f

47

v

63

/

比如举下面2个例子：

a) 字符长度为能被3整除时：比如“Tom” ：

所以，btoa('Tom') = VG9t

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

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

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

<a href="http://hongru.github.com/proj/base64/test.html" target="_blank">Base64 example</a>