javascript - 是否有可能从 getImageData 中获得超过 8 位的颜色值？

Question

我正在尝试在 html5 画布上操作像素。使用 getImageData 方法，我只能得到一个带有画布 RGBA 值的 Uint8Array。是否有可能获得更精确的数组？我想操作图片的所有 16 位颜色值。

Answer 1

不，因为画布上下文的颜色空间必须与 CSS 颜色值的颜色空间匹配：

在支持 CSS 的用户代理中，画布元素使用的颜色空间必须与用于处理 CSS 中该元素的任何颜色的颜色空间相匹配。

此外，当前规范ImageData仅提供了一个 8 位数组：

interface ImageData {
  readonly attribute unsigned long width;
  readonly attribute unsigned long height;
  readonly attribute Uint8ClampedArray data;
};

参考

• http://www.w3.org/TR/html5/embedded-content-0.html#color-spaces-and-color-correction
• http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#imagedata

Answer 2

如今，大多数显示系统通常的颜色分辨率是每个颜色通道和像素 8 位（每个 RGBA 像素 32 位），并且在不久的将来不太可能增加，因为人眼无法区分更小的颜色细微差别。因此，getImageData 和 setImageData 使用每个颜色通道 8 位。

通常只有图像处理需要更高的颜色分辨率。当您想在内部以每通道 16 位或更多位执行图像处理操作时，您始终可以自己转换 getImageData 返回的值，并在使用 setImageData 返回之前将它们转换回 8 位。