Как сделать изображение черно-белым?

Question

Я создал изображение. Как преобразовать цветное изображение в черно-белое. Например, наведи на него курсор мыши.

Answer 1

Сначала откройте его в приличном редакторе изображений, преобразуйте его в Оттенки серого (я предполагаю, что вы хотите больше цветов, чем черно-белый;)), сохраните его в веб-приложении.

Затем при наведении курсора просто вызовите некоторую функцию JavaScript, которая изменяет src элемента HTML <img>, чтобы он указывал на URL изображения в градациях серого.

Базовый стартовый пример:

<img src="color.jpg" onmouseover="this.src='blackwhite.jpg'">

Answer 2

Самый простой способ - создать еще одно изображение на черно-белой стороне сервера (или с помощью программы редактирования изображений, если изображение не является динамическим) и поменять цвет на черно-белое при наведении мыши.

редактировать

Тогда просто установите непрозрачность, используя css: http://www.quirksmode.org/css/opacity.html

Answer 3

img {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}
img:hover {
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}

Эффект черного и белого достигается с помощью значения оттенков серого для свойства фильтра.Оттенки серого (100%) соответствуют черным и белым, а оттенки серого (0%) соответствуют полноцветным.Для этого свойства необходим префикс -webkit-filter. Плавная анимация достигается с помощью свойства перехода

Answer 4

В библиотеке Pixastic JS Image Manipulation есть эта функция, которую можно вызывать через JSNI.

Есть также этот скрипт , который, похоже, работает только в IE, используя проприетарную магию Microsoft.

Но, честно говоря, просто создайте ненасыщенный образ для каждого изображения, которое вы хотите на стороне сервера, и поменяйте его местами с помощью JS / CSS.