2010-10-14 3 views
2

Есть ли способ отображения цветного изображения в виде шкалы серого с использованием Html/Css? То есть. без обработки на стороне сервера.Отображать цветное изображение как монохромное

Отредактировано: монохромный -> оттенки серого

+0

Вы можете сделать это с помощью '' вероятно; просто пробегите по интенсивности нормализации пикселей до монохромного. Не все браузеры поддерживают '' однако. – Pointy

+0

Я предполагаю, что вы имеете в виду серо-масштабные, а не монохромные - последние будут просто черными и белыми. – tcrosley

+0

@Pointy, canvas будет работать для моих целей на самом деле. И да, кроссли, я имел ввиду оттенки серого благодаря исправлению. Спасибо, p –

ответ

2

Лучше всего было бы, чтобы загрузить полутонового изображения в первую очередь. Если это для какой-то задачи наведения, взгляните на создание CSS sprite. Я понимаю, что это не полностью отвечает на вопрос, но я не могу для меня понять, почему вам нужно манипулировать изображениями на стороне клиента.

+0

Много хороших решений здесь, но этот достигает того, что я ищу - без обмена изображениями, манипуляций с пикселями и т. Д. –

1

В дополнение к холсту, по крайней мере в некоторых браузерах (например, в Firefox), вы можете использовать фильтры SVG. Например, см. this slide (кнопка 2 вызывает фильтр, который делает практически то, что вы хотите).

1

Я думаю, что нашел еще один очень хороший способ с 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

1

Это не оттенки серого, но непрозрачность дает пользователю ощущение инвалидов:

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.

Смежные вопросы