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:

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.

Answer 2

I suppose you are using this plugin? Looking at the code it only seems to support <img src="..."> images so you'll either have to modify it or hope that someone else does.

Answer 3

I've asked this question before here.

And because of performance reasons I chose not to convert the image to grayscale on the client-side.