Question

I have been experimenting with the HTML5 canvas api and have written a script that creates black and white images from color images.

The formula for RGB to grayscale that I’m using is: r * 0.2989 + g * 0.5870 + b * 0.1140

I would like to know if anyone knows of any more formulas for manipulating images through RGB values.

Answer 1

here are some

// ADD
c = Math.min( 255, Math.max( 0, c0 + c1 ) )
// SUBTRACT
c = Math.max( 0, c0 - c1 )
// MULTIPLY
c = Math.floor( ( c1 * c0 ) / 0xff )
// SCREEN
c = 255 - Math.floor( ( 255 - c0 ) * ( 255 - c1 ) / 255 )
// LIGHTEN
c = c0 > c1 ? c0 : c1
// DARKEN
c = c0 < c1 ? c0 : c1
// DIFFERENCE
c = c0 > c1 ? c0 - c1 : c1 - c0
// INVERT ( no influence from c1 )
c = 255 - c0
// OVERLAY
c = c0 < 128 ? Math.floor( ( c1 * c0 ) / 127 ) : 255 - Math.ceil( ( 255 - c0 ) * ( 255 - c1 ) / 127 )
// HARDLIGHT
c = c1 < 128 ? Math.floor( ( c1 * c0 ) / 127 ) : 255 - Math.ceil( ( 255 - c0 ) * ( 255 - c1 ) / 127 )

where c0 and c1 are color decimal values and c is the output value