Javascript canvas.toDataURL changes from original data URI

Question

I'm currently developing the mozilla extension, trying to load an image (PNG) that is encoded using a data URI, draw it on the canvas element to finally change some pixel values ​​and save it as a file on disk.

The strange thing that I notice is that even if I do not change anything on the image, and just draw the image on the canvas and use canvas.toDataURL () to see what is being generated, this encoded data is different from the original.

The code I use to see it is quite simple:

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;

I assume that there is some kind of compression or may be associated with transparent films.

, . , - , , , , ( ).

, ?

, - , toDataURL? XPCOM, PNG?

Answer 1

, , . . , , .

- , 255 (1.0), , , . , - 255.

Canvas ImageData Image DOM Element, , - 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, . , .