I manipulate the RGBA values of an image and save it with toDataUrl like this:
image.src = ctx.toDataURL("image/png");
Now I want to read out the RGBA values of this saved image. It should have the same RGBA values, but in fact some values are changed, i.e.: from RGB(0,0,1) to RGB(0,0,0). This doesn't seem like a big problem But I need the exact same values I've already manipulated to decode my encoded image since I programm a steganography, otherwise I can't be sure that the manipulated image and its RGBA values are saved correctly.
Edit: The encoded image is loaded on my server by the user and added in the DOM as img element. Than my encoding function accesses on this image by canvas with ctx.getImageData. Now I manipulate the RGBA values after the LSB-Method. (The message in binary is embedded on the last Bit of every R, G, B and A value)
The encoding function itself is working, but when it comes to decoding (of the manipulated image saved with toDataURL), the data arrays - before and after - of getImageData are not equal.
I guess it could be some kind of data loss caused by toDataURL
Unequal values are caused during the .getImageData -> .putImageData cycle. This cycle is lossy.
The WhatWG (standards board) specification allows browsers to change your image data values when you do .putImageData. Therefore, your resulting .toDataURL will have equivalent (but not identical) color values from the values you manipulated. The browser is allowed to change your values in order to more easily combine pixels that overlay/underlay the canvas.
Due to the lossy nature of converting to and from premultiplied alpha colour values, pixels that have just been set using putImageData() might be returned to an equivalent getImageData() as different values.
https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element