将图像转化为Base64字符串的原理或者过程是什么

Question

今天看了Base64编码的原理，想试着用Javascript去实现图像到Base64字符串的编码，而且不用canvas.toDataURL()函数，不用fileReader，而只是用canvas获取图像的rgba数据之后自己对数据进行编码处理，但是今天试了两种方法之后都失败了。下面是我对数据处理的两种方式：
将用canvas获取的rgba数组每一个值都转化为8为二进制，然后连接成二进制字符串，然后将这个字符串转化为Base64字符串；
将用canvas获取的rgba数组二值化，也就是值大于127的，二进制字符串加'1'd，小于127的，二进制字符串加'0'，将这样得到的字符串转化为Base64字符串；
两种方式试过之后，都是失败的。
希望大神能指点我一下，图片转化为Base64字符串是一个怎么样的过程，谢谢！

Answer 1

canvas.toDataURL()首先把图像转成PNG数据，然后再把得到的二进制的PNG数据转成纯ASCII的base64编码的字符串。你要用JavaScript写一个PNG编码库么？

Answer 2

试过了【canvas.toDataURL();】。转出来base64带：data:image/png;base64,是固定的png。不是原图了。但我的结果：存数据库后取出来无法显示。