canvas toDataUrl 方法是否操作 rgba 值？答案

【问题标题】：Does canvas toDataUrl method manipulate rgba values?canvas toDataUrl 方法是否操作 rgba 值？
【发布时间】：2014-12-14 23:52:44
【问题描述】：

我操作图像的 RGBA 值并使用 toDataUrl 保存它，如下所示：

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

现在我想读出这个保存图像的 RGBA 值。它应该具有相同的 RGBA 值，但实际上某些值已更改，即：从 RGB(0,0,1) 更改为 RGB(0,0,0)。这似乎不是一个大问题但我需要与我已经处理过的完全相同的值来解码我的编码图像，因为我编写了一个隐写术，否则我无法确定处理过的图像及其 RGBA 值是否正确保存。

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

编码函数本身是有效的，但是在解码（使用 toDataURL 保存的操作图像）时，getImageData 之前和之后的数据数组不相等。

我猜这可能是由 toDataURL 引起的某种数据丢失

【问题讨论】：

标签： javascript canvas html5-canvas

【解决方案1】：

在 .getImageData -> .putImageData 循环期间会导致不相等的值。这个循环有损。

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

由于与预乘 Alpha 颜色值相互转换的有损特性，刚刚使用 putImageData() 设置的像素可能会作为不同的值返回到等效的 getImageData()。

https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element

【讨论】：

ctx.putImageData(): "globalAlpha 和 globalCompositeOperation 属性，以及 shadow 属性，在此方法调用中被忽略；画布中的像素被大量替换，没有合成， Alpha 混合，无阴影等。”与我的隐写术问题有关，这意味着我不能使用 alpha-chanel，只有 RGB 可以为我工作。这个对吗？ alpha 不也会影响 RGB 值吗？

【解决方案2】：

toDataURL("image/png")输出PNG8图片，最多只支持256色。因此，如果您想要精确的输出，这是不可靠的。在这种情况下，您必须制定自己的编码算法（例如，借助 getImageData 获取颜色数据，并将其编码为 PNG24 图像）。

【讨论】：

好吧，我很抱歉。但我不得不压缩我的问题和代码。我将编辑我的问题。
我研究了互联网。 PNG 具有无损压缩，而不是 JPEG 或 webp。我想这就是为什么 toDataURL 的第二个参数不需要 png 的原因……
@Reijo 根据spec，PNG 是唯一需要支持的 MIME 类型。 JPG 等其他类型取决于浏览器供应商。但是 W3C 确实给出了关于何时使用第二个参数的建议。