Обесцвечивание элементов веб страниц

Недавно нашел интересный метод обесцветить, т.е. сделать черно-белым любой элемент на веб странице, будь то изображение, таблица, форма или что-либо еще.

Казалось бы, зачем это может понадобиться? Однако у меня сразу же появилась мысль о том, где такая возможность пригодиться. Довольно часто в моей практике встречались дизайны, в которых существовали элементы управления (различные кнопки, иконки) в двух видах – цветной, обозначающий что элемент активен, и серый, обозначающий что элемент не активен и нажимать на него не имеет смысла. Раньше я использовал два разных изображения – одно цветное, одно черно-белое, и если элемент деактивировался, то я подставлял нецветную картинку. Недостаток такого метода в том, что браузер должен подгружать дополнительную картинку, и хуже всего, что этих картинок может быть довольно много… Кроме того, нужно тратить время на то, чтобы создавать все эти нецветные изображения. При помощи предлагаемого здесь метода, обесцвечивание можно выполнить простой функцией grayscale().

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

Теперь вкратце опишу принцип работы этого метода.

Хоть я частенько и ругаю IE за его огрехи, но в этом случае он справляется лучше всех, ибо в Internet Explorer существует специальный фильтр который позволяет сделать такое преобразование цвета:

elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';

Фильтр может быть установлени и в CSS:

elem {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    /* Элемент должен иметь "hasLayout"! */
    zoom: 1;
}

Что касается остальных браузеров, то здесь все гораздо сложнее. Во первых обесцвечивание обычных элементов – параграфов, таблиц и т.п. В этом случае нужно просматривать значения “цветных” стилей: color, background-color, и изменять их цвет следующими фукнциями:

// Уменьшение насыщенности
function RGBtoDesat(r,g,b) {
    var average = (r + g + b) / 3;
    return {
        r: average,
        g: average,
        b: average
    };
}

// Преобразование в черно-белый цвет
function RGBtoGrayscale(r,g,b) {
    var mono = parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );
    return {
        r: mono,
        g: mono,
        b: mono
    };
}

Для обесцвечивания изображений используется другая технология – элемент <canvas> и его метод getImageData(), но при этом изображение должно находиться на том же домене, что и веб страница. По всей видимости метод getImageData() не поддерживается в Chrome и Safari меньше четвертой версии, поэтому для этих браузеров такой метод работать не будет.

Использование

Чтобы выполнить обесцвечивание, нужно вызвать функцию grayscale(), передав в качестве параметра элемент или коллекцию элементов:

// один элемент
var el = document.getElementById( 'myEl' );
grayscale( el );

// Массив элементов DOM
grayscale( document.getElementsByTagName('div') );

// Также работает с коллекциями jQuery
grayscale( $('div') );

Чтобы вернуть элемент в первоначальное, цветное, состояние, нужно воспользоваться функцией grayscale.reset():

grayscale.reset( el );
grayscale.reset( $('div') );

При всем этом, я бы не советовал вам использовать такую методику для больших изображений, так как их использование в элементе canvas может поглотить много ресурсов, даже если вы используете предлагаемую автором фунцкию grayscale.prepare() работы с такими изображениями.

Больше информации можете узнать на здесь. Там же можно скачать скрипт и посмотреть демо пример автора.

Смотреть демо