什么数据用于`toDataURL`来导出base64 URI字符串

Question

我尝试实施toDataURL，这就是我所做的：

1. 根据规范创建base64编码器。 wiki
上有编码器来源
2. 将图像绘制到画布上，并使用`getImageData（0,0，width，height）获取图像数据
3. 将rgba数据编码为base64使用编码器。

但结果与标准canvas.toDataURL的输出不同。到目前为止，我认为问题可能是rgba数据。但我不确定。

以下是codepen

上的演示

修改

在研究png算法上花了一些时间之后，我尝试实现它，但数据问题又出现了。 根据png规范，我可以将rgba用作IDAT的数据部分，同时将color type的{​​{1}}设置为IHDR，将6设置为depth {1}}。然后我通过解码来分析img的base64代码（你可以找到登录演示），一切顺利但数据长度。



图片显示8的长度仅 30 ，但画布的IDAT输出的数据长度 100 。

为什么getImageData中的rgba数据与base64的数据不同？