Преобразование изображения в оттенки серого в HTML / CSS

Есть ли простой способ отобразить цветное растровое изображение в оттенках серого с помощью Just HTML/CSS?

Он не должен быть IE-совместимым (и я думаю, что не будет) - если он работает в FF3 и / или Sf3, для меня этого достаточно.

Я знаю, что могу сделать это и с SVGCanvas, но сейчас кажется, что это большая работа.

Есть ли действительно ленивый способ сделать это?

Поддержка CSS-фильтров появилась в Webkit. Итак, теперь у нас есть кросс-браузерное решение.

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

<img src="http://lorempixel.com/400/200/">

А как насчет Internet Explorer 10?

Вы можете использовать polyfill как серый .

Исходя из ответа brillout.com , а также Романа требование «без SVG», вы можете обесцветить изображения в Firefox, используя только один файл SVG и немного CSS.

Ваш SVG-файл будет выглядеть так:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <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>

Сохраните его как resources.svg, теперь он может быть повторно использован для любого изображения, которое вы хотите изменить на оттенки серого.

В вашем CSS вы ссылаетесь на фильтр, используя специфическое filterсвойство Firefox :

.target {
    filter: url(resources.svg#desaturate);
}

Также добавьте проприетарные MS, если хотите, примените этот класс к любому изображению, которое вы хотите преобразовать в оттенки серого (работает в Firefox> 3.5, IE8) .

edit : вот хороший пост в блоге, который описывает использование нового filterсвойства CSS3 в ответе SalmanPK в сочетании с подходом SVG, описанным здесь. Используя этот подход, вы получите что-то вроде:

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

Дополнительная информация о поддержке браузера здесь .

Для Firefox вам не нужно создавать файл filter.svg, вы можете использовать схему URI данных .

Принятие кода CSS первого ответа дает:

filter: 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+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

Позаботьтесь о том, чтобы заменить строку «utf-8» на кодировку вашего файла.

Этот метод должен быть быстрее, чем другой, потому что браузеру не нужно будет делать второй HTTP-запрос.

Обновление: я сделал это в полном репозитории GitHub, включая полифилл JavaScript для IE10 и IE11: https://github.com/karlhorky/gray

Первоначально я использовал ответ SalmanPK , но затем создал вариант ниже, чтобы исключить дополнительный HTTP-запрос, необходимый для файла SVG. Встроенный SVG работает в версиях Firefox 10 и выше, а версии ниже 10 больше не занимают даже 1% мирового рынка браузеров.

С тех пор я постоянно обновляю решение в этом сообщении в блоге , добавляю поддержку постепенного перехода к цвету, поддержку IE 10/11 с SVG и частичную шкалу серого в демонстрационной версии.

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<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>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}

Если вы можете использовать JavaScript, то этот скрипт может быть тем, что вы ищете. Он работает кросс-браузер и пока работает нормально для меня. Вы не можете использовать его с изображениями, загруженными из другого домена.

http://james.padolsey.com/demos/grayscale/

Просто сегодня такая же проблема. Я изначально использовал решение SalmanPK, но обнаружил, что эффект отличается между FF и другими браузерами. Это потому, что матрица преобразования работает только на яркость, а не на яркость, как фильтры в Chrome / IE. К моему удивлению, я обнаружил, что альтернативное и более простое решение в SVG также работает в FF4 + и дает лучшие результаты:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

С помощью css:

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

Еще одно предостережение: IE10 больше не поддерживает «filter: grey» в режиме совместимости со стандартами, поэтому для работы требуется переключение режима совместимости в заголовках:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Простейший способ достижения оттенков серого исключительно с помощью CSS - через filterсвойство.

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Свойство по-прежнему не поддерживается полностью и все еще требует его -webkit-filterдля поддержки во всех браузерах.

Не похоже, что это возможно (пока), даже с CSS3 или проприетарным -webkit-или-moz- CSS-свойствами.

Тем не менее, я нашел этот пост в июне прошлого года, в котором использовались фильтры SVG для HTML. Не доступно ни в одном текущем браузере (демонстрация намекает на пользовательскую сборку WebKit), но очень впечатляет в качестве доказательства концепции.

Для людей, которые спрашивают о игнорируемой поддержке IE10 + в других ответах, ознакомьтесь с этой частью CSS:

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

Применяется к этой разметке:

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
      <defs>
         <filter id="filtersPicture">
           <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
           <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
        </filter>
      </defs>
      <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

Для получения дополнительных демонстраций ознакомьтесь с разделом « Графика CSS3» в IE testdrive и этим старым блогом IE http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx.

В Internet Explorer используйте свойство filter.

В webkit и Firefox в настоящее время нет способа обесцветить изображение исключительно с помощью CSS. так что вам нужно будет использовать canvas или SVG для решения на стороне клиента.

Но я думаю, что использование SVG более элегантно. проверьте мой блог для SVG-решения, которое работает как для Firefox, так и для webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

И, строго говоря, поскольку SVG - это HTML, решение - это чистый html + css :-)

Новый способ сделать это был доступен в течение некоторого времени в современных браузерах.

background-blend-mode позволяет получить некоторые интересные эффекты, одним из которых является преобразование в оттенках серого

Значение яркости , установленное на белом фоне, позволяет это сделать. (чтобы увидеть это серым цветом)

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

<div class="test"></div>

Яркость берется из изображения, цвет берется из фона. Поскольку он всегда белый, цвета нет.

Но это позволяет гораздо больше.

Вы можете анимировать эффект, установив 3 слоя. Первым будет изображение, а вторым будет бело-черный градиент. Если вы примените режим умножения наложения, вы получите белый результат, как и раньше, на белой части, но исходное изображение на черной части (умножение на белый дает белый, умножение на черный не действует).

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

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

div {
    width: 600px;
    height: 400px;
}

.test {
    background: url("http://placekitten.com/1000/750"), 
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750"); 
    background-position: 0px 0px, 0px 0%, 0px 0px;
    background-size: cover, 100% 300%, cover;
    background-blend-mode: luminosity, multiply;
    transition: all 2s;
}

.test:hover {
    background-position: 0px 0px, 0px 66%, 0px 0px;
}

<div class="test"></div>

ссылка

матрица совместимости

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Может быть, этот способ поможет вам

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

w3schools.org

На самом деле это проще сделать с помощью IE, если я правильно помню, используя собственное свойство CSS. Попробуйте это FILTER: Grayс http://www.ssi-developer.net/css/visual-filters.shtml

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

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

Если вы хотите использовать Javascript, то вы можете использовать холст для преобразования изображения в оттенки серого. Поскольку Firefox и Safari поддерживают <canvas>, он должен работать.

Поэтому я погуглил «Оттенки серого», и первый результат был http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html, который, кажется, работает.

поддержка встроенных CSS-фильтров в webkit была добавлена ​​в текущей версии 19.0.1084.46

так -webkit-filter: grayscale (1) будет работать, и это проще, чем SVG-подход для webkit ...

Вот миксин для LESS, который позволит вам выбрать любую непрозрачность. Заполните переменные самостоятельно для простого CSS с разными процентами.

Здесь намек на подсказку: в матрице используется тип насыщенности, поэтому вам не нужно делать ничего необычного, чтобы изменить процент.

.saturate(@value:0) {
    @percent: percentage(@value);

    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(@percent); /* Current draft standard */
    -webkit-filter: grayscale(@percent); /* New WebKit */
    -moz-filter: grayscale(@percent);
    -ms-filter: grayscale(@percent);
    -o-filter: grayscale(@percent);
}

Тогда используйте это:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}

Вам не нужно использовать столько префиксов для полного использования, потому что если вы выбираете префикс для старого Firefox, вам не нужно использовать префикс для нового Firefox.

Так что для полноценного использования достаточно использовать этот код:

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<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>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: none;
    -webkit-filter: grayscale(0%);
}

В дополнение к ответам других, можно обесцветить изображение на половине FF без головной боли матрицы SVG :

<feColorMatrix type="saturate" values="$v" />

Где $vмежду 0и 1. Это эквивалентно filter:grayscale(50%);.

Живой пример:

.desaturate {
    filter: url("#desaturate");
    -webkit-filter: grayscale(50%);
}
figcaption{
    background: rgba(55, 55, 136, 1);
    padding: 4px 98px 0 18px;
    color: white;
    display: inline-block;
    border-top-left-radius: 8px;
    border-top-right-radius: 100%;
    font-family: "Helvetica";
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
  	<feColorMatrix type="saturate" values="0.4"/>
  </filter>
</svg>

<figure>
  <figcaption>Original</figcaption>
  <img src="http://www.placecage.com/c/500/200"/>
  </figure>
<figure>
  <figcaption>Half grayed</figcaption>
  <img class="desaturate" src="http://www.placecage.com/c/500/200"/>
</figure>

Ссылка на MDN

Основываясь на ответе Роберта :

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

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

Вы должны использовать матрицу преобразования следующим образом:

0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0     0     0     1

Это должно хорошо работать для всех типов изображений на основе модели RGBA (красный-зеленый-синий-альфа).

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

• Яркость и цветоразностные сигналы
• Ответ Маргуса на вопрос: «Значение шкалы серого в значении цвета» @stackoverflow part: Edit 2: @Hans Passant
• Чарльз А. Буман - Университет Пердью - Аналоговое ТВ, страница 20 и 21
• И здесь вы можете найти некоторые C # и VB коды

Одно ужасное, но выполнимое решение: визуализировать изображение с помощью объекта Flash, который затем дает вам все возможные преобразования во Flash.

Если ваши пользователи используют новейшие браузеры и если Firefox 3.5 и Safari 4 поддерживают его (я не знаю, что они делают / будут), вы можете настроить атрибут цветового профиля CSS изображения, установив для него значение ICC в оттенках серого. URL профиля. Но это много если!

быть Альтернативой для старого браузера может быть использование маски производится с помощью псевдо-элементов или встроенных тегов.

Абсолютное позиционирование при наведении на img (или текстовую область, для которой не требуется ни щелчок, ни выделение) может близко имитировать эффекты цветовой шкалы с помощью rgba () или translucide png .

Это не даст одну цветовую гамму, но затеняет цвет вне диапазона.

тест на ручке с 10 разными цветами через псевдоэлемент, последний - серый. http://codepen.io/gcyrillus/pen/nqpDd (перезагрузить, чтобы переключиться на другое изображение)

Вы можете использовать одну из функций jFunc - использовать функцию "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx

Попробуйте этот плагин jquery. Хотя это не просто решение HTML и CSS, но это ленивый способ достичь того, что вы хотите. Вы можете настроить оттенки серого в соответствии с вашими потребностями. Используйте его следующим образом:

$("#myImageID").tancolor();

Там есть интерактивная демоверсия . Вы можете поиграть с этим.

Ознакомьтесь с документацией по использованию, это довольно просто. документы

Для градаций серого в процентах в Firefox используйте вместо этого фильтр насыщения : (ищите «насыщать»)

filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"

Если вы или кто-то еще сталкиваетесь с подобной проблемой в будущем, открыты для PHP. (Я знаю, что вы сказали HTML / CSS, но, возможно, вы уже используете PHP в бэкэнде) Вот решение PHP:

Я получил его из библиотеки PHP GD и добавил переменную для автоматизации процесса ...

<?php
$img = @imagecreatefromgif("php.gif");

if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);

// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');

// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);

// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);

imagedestroy($dest);
imagedestroy($src);

?>