Уважаемые друзья и пользователи сайта ART-UCOZ!
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
3 Способа Превратить Веб-Изображение в оттенки Серого
Дата добавления: 15.12.2013 - 19:55
Категория: Уроки / Литература / Пособия
Добавил: Buger
Количество просмотров: 2.6k
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
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 */
}
-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);
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>
<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');
}
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");')
}
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;
}
-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;
}
-webkit-filter: grayscale(100%);
-webkit-filter: grayscale(1);
filter: grayscale(100%);
filter: url('../img/gray.svg#grayscale');
filter: gray;
}
Вот и все, вы узнали 3 Способа как Превратить Веб-Изображение в оттенки Серого
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: