与原始数据URI相比,javascript canvas.toDataURL更改

Question

我正在开发一个mozilla扩展,尝试加载一个用数据URI编码的图像(PNG),在canvas元素上绘制它,最后更改一些像素值并将其保存为磁盘上的文件.

我注意到的一件奇怪的事情是,即使我没有更改图像上的任何内容,我只是在画布上绘制图像并使用canvas.toDataURL()来查看生成的内容,此编码数据与原始数据不同.

我用来看这个代码是非常基本的:

var image = new Image();
image.onload = function() {
    var canvas = document.createElement('canvas')
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext('2d').drawImage(image, 0, 0);
    var data = canvas.toDataURL(); // this right here is different from image.scr data!
}
image.src = "data:image/png;base64," + encodedData;

我认为存在某种压缩或者可能与透明度有关.

我检查了文档,但找不到解释.我想我看到一些颜色被改变成其他类似的东西,这可能是搞乱我想要实现的东西(即改变一些像素值).

关于发生了什么的任何想法？

如果没有,有没有人知道是否有任何其他方法将画布图像保存到磁盘上的文件而不使用toDataURL方法？可能是一个能够以PNG二进制格式保存所有像素的XPCOM组件吗？

谢谢

Answer 1

有多种合法方法可以对PNG进行无损过滤和编码。例如，查看此图表，显示使用不同工具对同一图像进行无损编码时可能存在的巨大文件大小差异。

然而，如果您将 toDataURL 版本重新绘制到 Canvas 并获得新的 toDataURL 并且它有所不同，我会感到惊讶。我希望同一个浏览器每次都能对相同的图像进行相同的编码。