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

Question

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

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

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

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

Answer 1

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

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

Answer 2

Если вы или кто-то еще столкнетесь с подобной проблемой в будущем, открыты для 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);

?>

Answer 3

Для отображения оттенков серого в процентах в 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"

Answer 4

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

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

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

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

Answer 5

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

Answer 6

be Альтернативой более старому браузеру может быть использование маски, созданной псевдоэлементами или встроенными тегами.

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

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

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