javascripthtml5-canvasgetimagedataputimagedata

What is "colorspace" in imagedata?


Needed to do some pixel manipulation, but ImageData has changed. Now it has a colorSpace property.

What is this, and how do I use it as normal?

Just get an ImageData object in Chrome to reproduce.


Solution

  • This comes from this proposal to implement color-space management in canvas.

    Currently, canvas is stuck with legacy-srgb 8 bit depth. Some monitor can't handle this low level of information.

    This is still a proposal, but the currently proposed syntax to set the colorSpace of a 2DContext would be ctx.getContext('2d', {colorSpace: 'color-space', pixelFormat: 'pixelFormat', linearPixelMath: boolean});

    Currently, no one has implemented it yet, but chromium and chrome are in the process of doing so.
    Their current implementation only exposes a getter colorSpace property on ImageData objects, and a getContextAttributes method on the Context2D object, but there is not yet a way to set it for us (maybe there is with some startup flag, but I didn't find it).

    Note: You need to set the Experimental canvas features flag to true in chrome://flags to get access to these properties.

    But anyway, this property should in no way alter your code. All the default parameters of the ImageData are still the same.