Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

3 Способа Превратить Веб-Изображение в оттенки Серого

Дата добавления: 15.12.2013 - 19:55
Добавил: Buger
Количество просмотров: 902
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
3 Способа Превратить Веб-Изображение в оттенки Серого
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 0.0
/
голосов 0
Изображения в градациях черно-белого цвета, как я думаю, выглядят более художественным.
Многие фото редакторы, таких как Photoshop позволяют вам превращать цветное изображение в полутоновое (черно-белое) легко.
Есть даже возможность настройки цветовой глубины и цветовые тона.
К сожалению, это менее понятный для Веб из-за различий в возможности браузера.

В этой статье мы собираемся пройти через некоторые методы, которые мы можем использовать, чтобы превратить изображение в градациях серого цвета.
Мы также будем комбинировать эти методы, чтобы добиться вид изображения в градациях серого, который работает через разные браузеры.

1. CSS-Фильтром

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

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

Для этого нам нужно всего лишь добавить следующие правила стилей, чтобы превратить изображение в градациях серого.
Код
img {  
    -webkit-filter: grayscale(1); /* Webkit */  
    filter: gray; /* IE6-9 */  
    filter: grayscale(1); /* W3C */  
}  

Этот код поддерживают браузеры IE6-9 и Webkit (Chrome 18+, Safari 6.0+, and Opera 15+).

(Примечание: В Internet Explorer 10 прекращена поддержка прежних версий IE фильтров и он также поддерживает, -ms-filter для применения в оттенках серого.
Этот код не работает в Firefox.
)

2. JavaScript

Вторая альтернатива заключается в использовании JavaScript, который технически должен работать во всех браузерах, но должна быть включена поддержка JavaScript, включая IE6 и ниже.
Вот код из Ajax Blender.
Код
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, эффект от этого будет отброшен, если JavaScript отключен в браузере.

3. SVG

Другой способ заключается в использовании SVG-Фильтра.
Все, что вам нужно сделать, это создать SVG-файл и поместить в него следующий код. Сохранить (Save) и указать имя файла, например: gray.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-файл, где следует идентификатор элемента фильтра в нашем SVG-файле:
Код
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+, Opera 15+, Safari, Chrome и Internet Explorer.
Код
img { 
        -webkit-filter: grayscale(100%); 
        -webkit-filter: grayscale(1); 
        filter: grayscale(100%); 
     
        filter: url('../img/gray.svg#grayscale'); 
        filter: gray; 
    }

Мы можем использовать приведенный выше код наряду с JavaScript-методом, и обеспечить CSS filter в качестве резервного в случае, если отключена поддержка JavaScript.
С помощью CSS, вы можете сделать следующее.
Код
.no-js img { 
        -webkit-filter: grayscale(100%); 
        -webkit-filter: grayscale(1); 
        filter: grayscale(100%); 
     
        filter: url('../img/gray.svg#grayscale'); 
        filter: gray; 
    }


Вот и все, вы узнали 3 Способа как Превратить Веб-Изображение в оттенки Серого







Источник: Не указан
Добавлять комментарии могут только зарегистрированные пользователи.