javascript canvas.toDataURL 与原始数据 URI 相比发生变化

Question

我目前正在开发一个 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 二进制格式保存所有像素？

谢谢

Answer 1

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

如果将 alpha 值设置为小于 255 (1.0)，则该像素的其他组件似乎会发生变化。该问题的解决方法是简单地将所有 alpha 值设置为 255。

到目前为止，我成功地能够使用 ImageData 和 Image DOM 元素将精确的精度数据存储到 Canvas 中，然后通过设置检索完全相同的数据而不会造成任何损失将 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;
}

然后获取数据的函数是：

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;
}

Answer 2

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

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