Javascript Image Manipulation Invert Color

I am trying to play with an image inside a webpage using javascript and it is being a pain. I have no coding platform atm except my browser. It should invert the color I think but

Solution 1:

If you are using MS Internet Explorer, the following code should work for you

<img src="xyz.jpg" onMouseover="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(invert=1)'" onMouseout="this.style.filter=''" />

Post IE 8 it the "filter" should be replaced by "-ms-filter"

Also a smarter way is mentioned at the sohtanaka site, which uses jquery and css to accomplish the required effect http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/

Hope this helps you :-)

Solution 2:

The xolor library has an inverse function:

xolor("rgb(100,200,50").inverse().rgb // returns the inverse in rgb format

Its implemented like this, where it already parsed the red, green, and blue values which exist as properties on the xolor object:

this.inverse = function() {
    return xolor({
        r: this.r ^= 0xff,
        g: this.g ^= 0xff,
        b: this.b ^= 0xff
    })
}

Solution 3:

That would work on a canvas context, but you're working with an image. Create a canvas and copy the image's data into it and then invert the colors.