css - How to apply the grayscale jquery plugin to a background image?

Question

I want to use the jquery-grayscale that converts images colors to their respective grayscale. Use it is very simple, identify the image and apply the plugin:

$('#my-icon').grayscale()

But how to do it if the image is defined in a css file as a background-image?

#my-icon{ background-image:url('../Images/my-icon.png'); }

Thanks.-

EDIT: Of course any other way to convert to grayscale these icons is useful too. Any idea?

Answer 1

(I know its an old post, but for the record...) If you want to switch from color to grayscale instantly, check this thread. If you want to switch them gradually, then use jquery and canvas.

This is an example code based on HTML5 Grayscale Image Hover site, as their version only supports < img > elements, I did this code to use 'background' css rule instead:

HTML:

<div class="gray"></div>

CSS:

div.gray {
    width: 300px;
    height: 00px;
    opacity: 0;
    background-image: url(images/yourimage.jpg);
}

JS:

jQuery(function() {
    $ = jQuery;
    // On window load. This waits until images have loaded which is essential
    $(window).load(function(){

        // Fade in images so there isn't a color "pop" document load and then on window load
        $("div.gray").animate({opacity:1},500);

        // clone colored image, convert it to grayscale and place the cloned one on top
        $('div.gray').each(function(){
            var div = $(this);
            var bg = div.css('background-image');
            bg = /^url((['"]?)(.*)1)$/.exec(bg);
            bg = bg ? bg[2] : "";
            if(bg) {
                var el = $("<div></div>");
                div.append(el);
                el.addClass('color').css({
                    "position":"absolute",
                    "z-index":"100",
                    "opacity":"0",
                    "background-image":"url('"+bg+"')"
                });
                div.css('background-image',"url('"+grayscale(bg)+"')");
            }
        });

        // Fade image 
        $('div.gray').mouseover(function(){
            var div = $(this);
            div.find('div.color').css({
                "width":div.width(),
                "height":div.height(),
                "top":div.position().top,
                "left":div.position().left,
            }).stop().animate({opacity:1}, 1000);
        })
        $('div.color').mouseout(function(){
            $(this).stop().animate({opacity:0}, 1000);
        });
    });

    // Grayscale w canvas method
    function grayscale(src){
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var imgObj = new Image();
        imgObj.src = src;
        canvas.width = imgObj.width;
        canvas.height = imgObj.height;
        ctx.drawImage(imgObj, 0, 0);
        var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
        for(var y = 0; y < imgPixels.height; y++){
            for(var x = 0; x < imgPixels.width; x++){
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg;
                imgPixels.data[i + 1] = avg;
                imgPixels.data[i + 2] = avg;
            }
        }
        ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        return canvas.toDataURL();
    }
});

The "url(...)" parser was obtained from this thread. It does not handle any kind of value, but works with simple paths. You may modify the regex. if you need more.

You can see the example code in JSBin: http://jsbin.com/qusotake/1/edit?html,css,js However it doesn't work because of domain restrictions (with the image). Please download the code and the image and execute it in your local web server.