与原始数据URI相比，javascript canvas.toDataURL发生了更改

我目前正在开发一个mozilla扩展，尝试加载一个用数据URI编码的图像（PNG），在画布元素上绘制，最后更改一些像素值并将其保存回磁盘上的文件

我注意到的一件奇怪的事情是，即使我没有更改图像上的任何内容，我只是在画布上绘制图像，并使用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方法？ XPCOM组件是否能够以PNG二进制格式保存所有像素

谢谢

有各种各样的PNG。例如，查看使用不同工具对同一图像进行无损编码时可能出现的巨大文件大小差异

---

但是，如果您将toDataURL版本重新绘制到画布，并获得一个新的toDataURL，那么我会感到惊讶，因为它不同。我希望同一个浏览器每次对相同的图像进行相同的编码。

我发现有一种特殊情况，像素发生了变化。可能会有更多的案例。我不能提供一个深入的技术解释，因此，我不能说它实际上没有改变图像

如果将alpha值设置为小于255（1.0）的任何值，则该像素的其他组件似乎会改变。解决这个问题的一个方法是简单地将所有alpha值设置为255

到目前为止，我已经能够使用ImageData和Image DOM元素成功地将精确数据存储到画布中，然后通过将alpha组件设置为255而不使用它存储数据来检索完全相同的数据，而不会丢失数据

以下是我目前使用的例程：

function make_image_with_data(contents) {
    // Fractional side length.
    var fside = Math.sqrt(contents.length / 3);
    // Whole integer side length.
    var side = Math.ceil(fside);

    var cv = document.createElement('canvas');

    cv.width = side;
    cv.height = side;

    var ctx = cv.getContext('2d');
    var id = ctx.createImageData(side, side);

    var data = id.data;

    data[0] = (contents.length >> 24) & 0xff;
    data[1] = (contents.length >> 16) & 0xff;
    data[2] = (contents.length >> 8) & 0xff;
    data[3] = 255;
    data[4] = (contents.length) & 0xff;

    var z = 5;
    var x = 0;

    for (; x < contents.length; ++x) {
        data[z] = contents.charCodeAt(x);
        // Skip the image alpha component.
        ++z;
        if (z % 4 == 3) {
            data[z] = 255;
            ++z;
        }
    }

    ctx.putImageData(id, 0, 0);

    var img = document.createElement('img');
    img.width = side;
    img.height = side;

    img.src = cv.toDataURL();

    $(document.body).append(img);

    return img;
}

函数使用数据（内容）生成图像{
//分数边长。
var fside=Math.sqrt（contents.length/3）；
//整整数边长。
var-side=Math.ceil（fside）；
var cv=document.createElement（'canvas'）；
cv.宽度=侧面；
cv高度=侧面；
var ctx=cv.getContext（'2d'）；
var id=ctx.createImageData（侧，侧）；
var data=id.data；
数据[0]=（contents.length>>24）&0xff；
数据[1]=（contents.length>>16）&0xff；
数据[2]=（contents.length>>8）&0xff；
数据[3]=255；
数据[4]=（contents.length）&0xff；
var z=5；
var x=0；
对于（；x

然后，获取数据的功能是：

function load_data_from_image(img) {
    var cv = document.createElement('canvas');
    cv.width = img.width;
    cv.height = img.height;
    var ctx = cv.getContext('2d');

    ctx.drawImage(img, 0, 0, img.width, img.height);

    var id = ctx.getImageData(0, 0, img.width, img.height);
    var data = id.data;

    var len = (data[0] << 24) | (data[1] << 16) | (data[2] << 8) | data[4];
    var out = new Uint8Array(new ArrayBuffer(len)); 

    var z = 5;

    for (var x = 0; x < len; ++x) {
        out[x] = data[z];
        // This is skipping the alpha component.
        ++z;
        if (z % 4 == 3) {
            ++z;
        }
    }

    return out;
}

从图像（img）加载函数数据{
var cv=document.createElement（'canvas'）；
cv.宽度=img.宽度；
cv.高度=img.高度；
var ctx=cv.getContext（'2d'）；
ctx.drawImage（img，0，0，img.width，img.height）；
var id=ctx.getImageData（0，0，img.width，img.height）；
var data=id.data；
var len=（data[0]我已经测试过，即使数据URI不同，如果我创建了一个新的图像，加载这个新的数据URI，这个新的数据URI是由toDataURI生成的，当我使用：
imageData=canvas.getContext（'2d'）.getImageData（0，0，canvas.width，canvas.height）获取图像数据时
两者都是相同的，而且像素似乎具有相同的值。这怎么可能呢？