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

Question

今天看了Base64编码的原理，想试着用Javascript去实现图像到Base64字符串的编码，而且不用canvas.toDataURL()函数，不用fileReader，而只是用canvas获取图像的rgba数据之后自己对数据进行编码处理，但是今天试了两种方法之后都失败了。下面是我对数据处理的两种方式：

1. 将用canvas获取的rgba数组每一个值都转化为8为二进制，然后连接成二进制字符串，然后将这个字符串转化为Base64字符串；

2. 将用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。
不是原图了。

但我的结果：存数据库后取出来无法显示。

Answer 3

你这样转换是不可能成功的，因为数据中至少缺少了一些关键信息：

1. 图片的像素数，也就是分辨率信息，显示图片时需要这个信息来正确处理图片，否则数据的意义不明的
2. 图片的像素数据描述性定义，比如各个颜色位宽，是否有透明通道等等，没有这样的标准性规范，也不能正常解析数据

你期望的根据数据数组来编码数据后解析，本身其实没有错，仅仅是确少上述规范性定义，所以数据不能直接被img标签解析，你如果有其他地方传递相应信息，其实也可以自行恢复出来，并且在canvas中填充展示出来，相当于是自行定义了一种专有图片格式啦，比如如果你的图片有标准的分辨率和颜色系统，这样就可以在存储相应数据时省略掉多张图片的通用信息，只存储纯数据啦。