How to apply grayscale jquery plugin to background image?

Question

I want to use jquery-grayscale , which converts the colors of images into the corresponding shades of gray. Using it is very simple, define the image and apply the plugin:

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

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

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

Thank.-

EDIT: Of course, any other way to convert to shades of gray is also useful for these icons. Any idea?

Answer 1

I suppose you use this plugin ? If you look at the code, it apparently supports <img src="..."> images, so you will either have to modify it, or hope that someone else will do it.

Answer 2

I asked this question before here .

And for performance reasons, I decided not to convert the image to shades of gray on the client side.

Answer 3

(I know his old post, but for the record ...) If you want to instantly switch from color to shades of gray, check this stream . If you want to switch them gradually, use jquery and canvas.

This is sample code based on the HTML5 Grayscale Image Hover website , as their version only supports <img>, I used this code to use the css "background" 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 analyzer "url (...)" was obtained from this thread . It does not handle any value, but works with simple paths. You can change the regular expression. if you need more.

You can see the sample code in JSBin: http://jsbin.com/qusotake/1/edit?html,css,js However, it does not work due to domain restrictions (with image). Download the code and image and execute it on the local web server.