Thank you, it works great.
However, in order to be able to apply grayscale on resized images, you would rather detect their size this way :

imgObj2 = new Image;
imgObj2.src = imgObj.src;
var imgW = imgObj2.width;
var imgH = imgObj2.height;

instead of

var imgW = imgObj.width;
var imgH = imgObj.height;

Cheers

This is great. I’d like to turn all images with a certain class grey, and while adapting your demo if I change:

var imgObj = document.getElementById(’image’);

to

var imgObj = $(’.image’);

I get errors about uncaught exceptions. Is there a way to do what I’m trying to accomplish?

I’m not too familiar with JS so my apologies if this is a foolish question. Thanks!

If your class name is “gray” so you should use:

var imgObj = $(’.gray’);

…I haven’t tested yet but it looks more logical.

Nice script, tnx. But to reset the colors?
Cheers

very nice tutorial, I would like to give an effect using jquery too

thanks for the snippet. i modified your code to this…

$.fn.greyscale = function() {
return this.each(function() {
if ($.browser.msie) {
this.style.filter = “progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)”
} else {
this.src = grayscaleImage(this)
}
})
}

function grayscaleImage(imgObj) {
…
}

$(document).ready(function() {
$(”#image”).greyscale()
})

just tested and seems to work fine. I managed to have it done on the .hover the picture. Is there any way to “turn it off” on the rollout (or any other action) ?

Thanks for this, I’ve just finished putting together an example usage on my site – http://petegoodman.com/labs/konami-code/

I tried to use this but I keep getting an error:

Security error” code: “1000
[Break on this error] var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

Here’s que slightly modified js:

http://www.cuencadamico.com.ar/js/slideshow.autoplay.js

Any ideas?

You don’t need to imbricate two loops looping through picture’s width and height.

“data” property returns an array, you can loop through this array with +4 increments.

for(var i = 0; i < imgPixels.data.length; i=i+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;
}

hi,
I already used your code with jpg files and it works well.
But now I want to use this code with png files and it isn’t work.
google chrome says : Uncaught Error: SECURITY_ERR: DOM Exception 18

you can see yourself at : http://www.ogre.be

Why it doesn’t work?

It doesn’t work if the image URL is given directly written in the src attribute.

Hi, thanks for your very useful tutorial.
Though (I’m a newbie to JS), I don’t fully understand how to apply it… I mean: where do I put the code (I surely need some function, I guess) and how do I call it inside the html.
Thank you in advance!

How to set the speed of animation?

Some pretty & cool from this snipet code.
How come to change the color other than grayscale, can we?

thanks for sharing this great trick! it wirked with me! great post!

Thanks, can we do this on mouse over? I mean show the desaturated images and on mouse over show the original?

I used absolute url only,not relative url.
But in the demo you have used relative url’s for images

This is a great script! I’m having an issue with WebKit though, for some reason it won’t load a bunch at the same time. See the following URL. Firefox handles it no problem, Safari and Chrome show blank images. But when you trigger mouse over then out, the grayscale effect works.

http://kate.joshreisner.com/
http://kate.joshreisner.com/scripts/global.js

Any advice to get them all to load on ready? Thanks.

Thank you for the IE filter tip, which was added as a fallback for IE on this page: http://kiridara.com/
Other browsers use a smooth transition.

Re my earlier comment, the issue for me was that I was using $(document).ready(), when i should have been using $(window).load(). That way, it waits until all the images are loaded in the browser before executing the effect.

not working with Firefox put work fine with opera
thanks for this great tutorial

I get an error: INDEX_SIZE_ERR: Dom Exception 1.

$(document).ready(function() {
var imgObj = document.getElementById(’image’);
desaturate(imgObj);
});

nice code
but it is not giving expected result for another colors
like
i want to change the image color as user select
rgb

great !
I had hard time to use your code to make grey out overlay of image as I wanted. To create a hover effect with the saturated image. It works now.

http://sorobanexam.org/about.html

I just found that someone created a plugin from your code http://plugins.jquery.com/project/desaturate

Re my earlier comment, the issue for me was that I was using $(document).ready(), when i should have been using $(window).load(). That way, it waits until all the images are loaded in the browser before executing the effect.

This is a great script! I’m having an issue with WebKit though, for some reason it won’t load a bunch at the same time. See the following URL. Firefox handles it no problem, Safari and Chrome show blank images. But when you trigger mouse over then out, the grayscale effect works.

Hi, Can we convert all images of gallery list to grayscale?