Как автоматически сгенерировать черно-белую версию картинки

Question

У меня есть парад с логотипом в WordPress. Все эти логотипы цвета RGB. Мне нравится эффект, который выглядит. Все логотипы черно-белые, а при наведении они становятся цветными.

Я знаю, как это сделать со спрайтом, но он просто удваивает каждый логотип, и у меня много. я знаю, что можно «обработать» его с помощью php или JavaScript, чтобы «сгенерировать» черно-белую версию на лету.

Какой будет лучший способ / код для этого?

Answer 1

Если у вас много изображений, я бы не рекомендовал вам создавать версию в оттенках серого на лету. Лучше подготовить соответствующую черно-белую версию для каждой иконки / логотипа. Это очень легко сделать, например, с помощью ImageMagick:

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

Это преобразует все .png изображения в оттенки серого.

Answer 2

Я нашел это идеальное решение (по счастливой случайности): https://github.com/GianlucaGuarini/jQuery.BlackAndWhite попробует все и скажет вам одну победу, спасибо!

Answer 3

В зависимости от браузеров, которые вы хотите поддерживать, вы можете сделать это, используя CSS-фильтры . Однако поддержка этого пока не очень широко распространена.

Answer 4

Если вы хотите сделать это для каждого изображения, вы можете использовать эту формулу, используя диапазон [0-255]:

Значение оттенков серого = (0,299 * r + 0,587 * g + 0,114 * b);

где r, g, b представляют значения красного, зеленого и синего для входных изображений.

Answer 5

И эта техника WordPress выглядит круто: http://bavotasan.com/2011/create-black-white-thumbnail-wordpress/