3 способа сделать изображение серым

Черно-белое изображение на CSS и Javascript

Бывает необходимо сделать изображение серым как можно быстрее и не используя графические редакторы. Конечно можно воспользоваться графическим редактором Adobe Photoshop(можно задать даже глубину и тон). В браузере конечно нельзя настраивать такие параметры, но наш глаз(если, конечно, вы не профессионал) почти не заметит разницы.

В этой статье мы рассмотрим способы как сделать изображение серым.

1. CSS фильтр

Использование свойства filter, пожалуй, является самым простым способом создать черно-белое изображение. Для создания черно-белого изображения в IE, необходимо использовать также свойство filter.

Сегодня, свойство filter является частью технологии CSS3, которое поддерживается такими браузерами как Firefox, Chrome и Safari. Webkit фильтры могут не только создавать эффект черно-белого изображения, но также могут придать эффект сепия и размытия.

Для того чтобы сделать изображение серым, необходимо прописать следующие свойства:

    img {  
        -webkit-filter: grayscale(1); /* Webkit браузеры */  
        filter: gray; /* для IE6-9 */  
        filter: grayscale(1); /* W3C */  
    }

Данные код будет работать в IE6-9, Chrome18+, Safari 6.0+ и Opera15+.

2. Javascript

Альтернативой вышеприведенному коду является Javascript, который работает во всех браузерах, если он включен, включая IE6 и ниже.

    var imgObj = document.getElementById('js-image');  
    function gray(imgObj) {  
        var canvas = document.createElement('canvas');  
        var canvasContext = canvas.getContext('2d');  
 
        var imgW = imgObj.width;  
        var imgH = imgObj.height;  
        canvas.width = imgW;  
        canvas.height = imgH;  
 
        canvasContext.drawImage(imgObj, 0, 0);  
        var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);  
 
        for(var y = 0; y < imgPixels.height; y++){  
            for(var x = 0; x < imgPixels.width; x++){  
                var i = (y * 4) * imgPixels.width + x * 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;  
            }  
        }  
        canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);  
        return canvas.toDataURL();  
    }  
    imgObj.src = gray(imgObj);

Используя Javascript, мы можем задавать изображению черно-белый эффект, например, при наведении и клике по изображению. Совместно можно использовать jQuery, чтобы создать плавный эффект перехода к серому. Единственным недостатком является то, что Javascript может быть отключен в браузере.

3. SVG

Другим способ является использование SVG фильтров.

Всё что вам нужно это создать SVG файл и использовать код ниже:

    <svg xmlns="http://www.w3.org/2000/svg">  
        <filter id="grayscale">  
            <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>  
        </filter>  
    </svg>

Затем необходимо связать SVG файл и ID:

1
2
3

    img {  
        filter: url('img/gray.svg#grayscale');  
    }

Также весь код можно написать прямо в CSS:

    img {  
        filter: url('url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'>
<feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");')  
    }

Результат будет похожим.

Вывод

Для поддержки данного эффекта всеми браузерами, необходимо комбинировать все способы. Данный код будет работать в Firefox 3.5+, Opera15+, Safari, Chrome и IE.

    img {  
        -webkit-filter: grayscale(100%);  
        -webkit-filter: grayscale(1);  
        filter: grayscale(100%);  
 
        filter: url('../img/gray.svg#grayscale');  
        filter: gray;  
    }

Данный код можно использовать вместе с Javascript, и в случае, если Javascript отключен, будет работать данный код. В этом может помочь Modernizr.

Modernizr добавляет js класс для body, если Javascript включен в браузере, и пропишет класс no-js если Javascript отключен. А в CSS осталось прописать сдедующее:

    .no-js img {  
        -webkit-filter: grayscale(100%);  
        -webkit-filter: grayscale(1);  
        filter: grayscale(100%);  
 
        filter: url('../img/gray.svg#grayscale');  
        filter: gray;  
    }