CODEWITHSUNDEEP
phpjavascriptimage-processingcolors
menardmam
menardmam

Reputation: 9986

How to automaticly generate a black and white version of a picture

I have logo parade in WordPress. All those logo are color RGB. I like the effect that look like. All the logo are b&W and then on hover it become color.

I know how to do it with sprite, but it just double each logo and i have a lot. i know it's possible to "process it" with php or JavaScript to "generate" the b&w version on the fly.

What will be the best way/code to do that ?

Upvotes: 2

Views: 305

Answers (5)

user1156770
user1156770

Reputation:

If you want do it for every image, you cane us this formula, using the range [0-255]:

Grayscale value = (0.299*r + 0.587*g + 0.114*b);

where r, g, b represent the red, green and blue values of the input images.

Upvotes: 0

menardmam
menardmam

Reputation: 9986

And that wordpress technique look cool : http://bavotasan.com/2011/create-black-white-thumbnail-wordpress/

Upvotes: 0

menardmam
menardmam

Reputation: 9986

I have found that perfect solution (by luck) : https://github.com/GianlucaGuarini/jQuery.BlackAndWhite will try all and tell you wich one win, thanks !

Upvotes: 2

Sirko
Sirko

Reputation: 74046

Depending on the browsers you want to support, you may be able to do it using CSS filters. However, support for this is not very widespread at the moment.

Upvotes: 1

dfsq
dfsq

Reputation: 193271

If you have a lot of images I would not recommend you to generate grayscale version on the fly. Better to prepare corresponding black and white version for each icon/logo. It's very easy to do for example with ImageMagick:

$ mogrify -channel RGBA -matte -colorspace gray *.png

This will conver all the .png images to the grayscale.

Upvotes: 2

Related Questions