Есть ли способ отображения цветного изображения в виде шкалы серого с использованием Html/Css? То есть. без обработки на стороне сервера.Отображать цветное изображение как монохромное
Отредактировано: монохромный -> оттенки серого
Есть ли способ отображения цветного изображения в виде шкалы серого с использованием Html/Css? То есть. без обработки на стороне сервера.Отображать цветное изображение как монохромное
Отредактировано: монохромный -> оттенки серого
Лучше всего было бы, чтобы загрузить полутонового изображения в первую очередь. Если это для какой-то задачи наведения, взгляните на создание CSS sprite. Я понимаю, что это не полностью отвечает на вопрос, но я не могу для меня понять, почему вам нужно манипулировать изображениями на стороне клиента.
Много хороших решений здесь, но этот достигает того, что я ищу - без обмена изображениями, манипуляций с пикселями и т. Д. –
Попробуйте это:
http://snipplr.com/view/2836/grayscale-img-with-css-crossbrowser/
Может быть хорошей альтернативой ...
Надеется, что это помогает!
В дополнение к холсту, по крайней мере в некоторых браузерах (например, в Firefox), вы можете использовать фильтры SVG. Например, см. this slide (кнопка 2 вызывает фильтр, который делает практически то, что вы хотите).
Я думаю, что нашел еще один очень хороший способ с PHP!
Проверьте это:
<?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);
?>
Я вспомнил свой вопрос, когда я пути, играя с Lib PHP GD.
Удачи! скажите мне, если его ничего хорошего ...
Trufa
Это не оттенки серого, но непрозрачность дает пользователю ощущение инвалидов:
Stilesheet:
.opaque {
-khtml-opacity:.50;
-moz-opacity:.50;
-ms-filter:”alpha(opacity=50)”;
filter:alpha(opacity=50);
opacity:.50;
}
Html:
<img class="opaque".... />
Это решение кросс-браузерное, работает со всеми новейшими браузерами IE8, старыми версиями Safari.
Вы можете сделать это с помощью '
Я предполагаю, что вы имеете в виду серо-масштабные, а не монохромные - последние будут просто черными и белыми. – tcrosley
@Pointy, canvas будет работать для моих целей на самом деле. И да, кроссли, я имел ввиду оттенки серого благодаря исправлению. Спасибо, p –