Question

I am trying to manipulate pixels on a html5 canvas. With the method getImageData I only get a Uint8Array with RGBA values of the canvas. Is there a possibility to get array with more precision? I would like to manipulate all 16bit color values of the picture.

Was it helpful?

Solution

No, since the color space of a canvas context must match the color space of the CSS color values:

In user agents that support CSS, the color space used by a canvas element must match the color space used for processing any colors for that element in CSS.

Also the current specification of ImageData provides only a 8bit array:

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

References

OTHER TIPS

Nowadays, the usual color resolution of most display systems is 8 bit per color channel and pixel (32bit per RGBA pixel), and it's unlikely to increase in the near future, because the human eye can't distinguish between much smaller color nunaces. For that reason, getImageData and setImageData work with 8 bit per color channel.

A higher color resolution is usually only required for image processing. When you want to perform image processing operations in 16 bit per channel or more internally, you can always convert the values returned by getImageData yourself, and convert them back to 8 bit before returning them with setImageData.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top