HTML5 Canvas image contrast

Question

I\'ve been writing an image processing program which applies effects through HTML5 canvas pixel processing. I\'ve achieved Thresholding, Vintaging, and ColorGradient pixel m

Answer 1

By vintaging I assume your trying to apply LUTS..Recently I have been trying to add color treatments to canvas windows. If you want to actually apply "LUTS" to the canvas window I believe you need to actually map the array that imageData returns to the RGB array of the LUT.

(From Light illusion) As an example the start of a 1D LUT could look something like this: Note: strictly speaking this is 3x 1D LUTs, as each colour (R,G,B) is a 1D LUT

R, G, B 
3, 0, 0 
5, 2, 1 
7, 5, 3 
9, 9, 9

Which means that:

For an input value of 0 for R, G, and B, the output is R=3, G=0, B=0 
For an input value of 1 for R, G, and B, the output is R=5, G=2, B=1 
For an input value of 2 for R, G, and B, the output is R=7, G=5, B=3 
For an input value of 3 for R, G, and B, the output is R=9, G=9, B=9

Which is a weird LUT, but you see that for a given value of R, G, or B input, there is a given value of R, G, and B output.

So, if a pixel had an input value of 3, 1, 0 for RGB, the output pixel would be 9, 2, 0.

During this I also realized after playing with imageData that it returns a Uint8Array and that the values in that array are decimal. Most 3D LUTS are Hex. So you first have to do some type of hex to dec conversion on the entire array before all this mapping.