canvas toDataUrl方法是否操作rgba值？ [英] Does canvas toDataUrl method manipulate rgba values?

问题描述

我操作图像的RGBA值并将其保存为toDataUrl，如下所示：

I manipulate the RGBA values of an image and save it with toDataUrl like this:

image.src = ctx.toDataURL("image/png");

现在我想读出这个保存图像的RGBA值。它应该具有相同的RGBA值，但实际上
一些值被改变，即：从RGB（0,0,1）到RGB（0,0,0）。这看起来不是一个大问题
但是我需要完全相同的值，我已经操作来解码我的编码图像，因为我编程隐写术，否则我不能确定操纵的图像和它的RGBA

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.

编辑：
编码图像由用户加载到我的服务器上，并作为img元素添加到DOM中。
比我的编码函数通过canvas使用ctx.getImageData访问此图像。
现在我在LSB方法之后操作RGBA值。 （二进制消息嵌入在每个R，G，B和A值的最后一位）

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)

编码函数本身正在工作，但是当涉及到解码（用toDataURL保存的操作图像），getImageData之前和之后的数据数组不相等。

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.

我想这可能是某种数据丢失byDataURL

I guess it could be some kind of data loss caused by toDataURL

推荐答案

.getImageData - > .putImageData循环中会导致不相等的值。此周期为有损。

Unequal values are caused during the .getImageData -> .putImageData cycle. This cycle is lossy.

WhatWG（标准板）规范允许浏览器在您输入.putImageData时更改图像数据值。因此，您生成的.toDataURL将具有与您操作的值相等（但不完全相同）的颜色值。浏览器可以更改您的值，以便更轻松地组合覆盖/覆盖画布的像素。

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.

由于有损性质使用putImageData（）设置的像素可能会返回到等效的getImageData（）作为不同的值。

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

这篇关于canvas toDataUrl方法是否操作rgba值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！