gistfile1.js

// jquery invert plugin
// by paul irish

// some (bad) code from this css color inverter
//    http://plugins.jquery.com/project/invert-color
// some better code via Opera to inverse images via canvas
//    http://dev.opera.com/articles/view/html-5-canvas-the-basics/#insertingimages
// and some imagesLoaded stuff from me
//    http://gist.github.com/268257

// the code is still pretty shit. 
// needs better hex -> rgb conversion..
// it could use color caching and image caching and also some perf-y skip elements type stuff.


(function ($) {

    $.fn.invert = function () 
    {

        var rgb_by_name = {
                black:   'rgb(0, 0, 0)',
                white:   'rgb(255, 255, 255)', 
                red:     'rgb(255, 0, 0)', 
                yellow:  'rgb(255, 255, 0)', 
                gray:    'rgb(128, 128, 128)', 
                blue:    'rgb(0, 0, 255)', 
                green:   'rgb(0,128,0)', 
                lime:    'rgb(0, 255, 0)', 
                fuchsia: 'rgb(255, 0, 255)', 
                aqua:    'rgb(0, 255, 255)', 
                maroon:  'rgb(128, 0, 0)', 
                navy:    'rgb(0, 0, 128)', 
                olive:   'rgb(128, 128, 0)', 
                purple:  'rgb(128, 0, 128)', 
                silver:  'rgb(192, 192, 192)', 
                teal:    'rgb(0, 128, 128)'
            };

        $(this).find('*').andSelf().each(function () {

            var t = $(this);
            changePart('color', t);
            changePart('backgroundColor', t);

            $.each(['right', 'bottom', 'left', 'top'], function (i, val) {
                changePart('border-' + val + '-color', t);
            });

            changeImage(t);

        });

        return this;
    };


    function changePart(prop, t) 
    {
        var color = toRGB(t.css(prop));

        if (color != 'transparent' && color.substring(0, 4) != 'rgba') {
            var rgb      = color.match(/\d+/g),
                inverted = [(255 - rgb[1]), (255 - rgb[2]), (255 - rgb[3])];

            t.css(prop, 'rgb(' + inverted.join(',') + ')');
        }
    }


    function toRGB(color) 
    {
        var rgb = [];
    
        if ('rgb' !== color.substring(0, 3) || 'transparent' !== color){
    
            if (color.substring(0, 1) == '#') {
    
                if (color.length === 4) {
                    color = color.replace(/([0-9a-fA-F]{1})/g, "$1$1");
                }
    
                rgb = color.match(/[0-9a-fA-F]{2}/g);
                rgb = [ parseInt(rgb[0], 16), parseInt(rgb[1], 16), parseInt(rgb[2], 16) ];
                color = 'rgb(' + rgb.join(', ') + ')';
            }
            else if ( rgb_by_name[color] ){
                color = rgb_by_name[color];
            }
        }
        
        return color;
    }

    function changeImage(t) 
    {
        // only operate on img tags and backgroundImages in dataurl or url form.
        if (!(t.is('img') || /^(data|url)/.test(t.css('backgroundImage')))) return;

        var img = new Image();

        $(img).bind('load', function () 
        {
            var elem = document.createElement('canvas');
                context = elem.getContext('2d'),
                x = 0,
                y = 0,
                result;

            elem.width = img.width;
            elem.height = img.height;

            try {

                // Draw the image on canvas.
                context.drawImage(img, x, y);

                // Get the pixels.
                var imgd = context.getImageData(x, y, img.width, img.height),
                    pix  = imgd.data,
                    i    = 0,
                    n    = pix.length
                ;

                // Loop over each pixel and invert the color.
                while ( i < n) {
                    pix[i] = 255 - pix[i];         // red
                    pix[i + 1] = 255 - pix[i + 1]; // green
                    pix[i + 2] = 255 - pix[i + 2]; // blue
                    // i+3 is alpha (the fourth element)
                    i += 4;
                }

                // Draw the ImageData object.
                context.putImageData(imgd, x, y);
                result = elem.toDataURL();
            }
            catch (e) {
                // image is on a different domain.
            }

            if (t.is('img')) t.attr('src', result)
            else t.css('backgroundImage', 'url(' + result + ')');

        }).each(function () 
        {
            // cached images don't fire load sometimes, so we reset src.
            if (this.complete || this.complete === undefined) {
                var src = this.src;
                this.src = '#';
                this.src = src;
            }
        });

        var match = t.css('backgroundImage').match(/url\((.*?)\)/),
            bg = match && match[1];
        // img src, url bg, datauri background.
        img.src = t[0].src || bg || t.css('backgroundImage');

    }

})(jQuery);