Converter uma imagem em escala de cinza em HTML / CSS

619

Existe uma maneira simples de exibir um bitmap colorido em escala de cinza com apenas HTML/CSS?

Não precisa ser compatível com o IE (e imagino que não será) - se funcionar em FF3 e / ou Sf3, isso é bom o suficiente para mim.

Eu sei que posso fazer isso com o SVGCanvas e com o Canvas, mas isso parece muito trabalho agora.

Existe uma maneira verdadeiramente preguiçosa de fazer isso?

Ken
fonte
14
"Não precisa ser compatível com o IE (e imagino que não será)" ? O IE fornece um conjunto de filtros DX desde 1997 (IE4), que realiza esse trabalho com apenas CSS e muito mais. Agora eles descartaram os filtros DX no IE10 e seguem rigorosamente os filtros baseados em SVG padrão. Você pode dar uma olhada nisso e nesta demonstração .
corvo vulcan
8
@vulcanraven Não é realmente 'mero ​​CSS' - se você desativar o script ativo no IE, os filtros param de funcionar.
Robertc
3
@robertc, é isso mesmo. Por outro lado, se você desativar o javascript em qualquer navegador, quase todos os RIAs, incluindo o Stackoverflow, pararão de funcionar (a menos que o desenvolvedor da Web tenha implementado o fallback da versão somente em HTML).
corvo vulcan
2
Basta usar o CSS stackoverflow.com/questions/286275/gray-out-image-with-css/... Obter minha resposta nesta questão
Sakata Gintoki

Respostas:

728

O suporte para filtros CSS chegou ao Webkit. Portanto, agora temos uma solução para vários navegadores.

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/">


E o Internet Explorer 10?

Você pode usar um polyfill como cinza .

Salman Abbas
fonte
1
Os filtros CSS @CamiloMartin são suportados apenas pelo Chrome 18+
Salman von Abbas
2
Atualização: a versão estável mais recente do Google Chrome (19) agora suporta filtros CSS. Yay! =)
Salman von Abbas
6
Existe alguma solução para o Opera?
Rustam
23
Então, qual é a solução para o IE10?
precisa
2
Para a posteridade: @TomAuger, estas perguntas e respostas têm instruções específicas para o IE10.
Barney
127

Seguindo a resposta de brillout.com , e também a resposta de Roman Nurik , e relaxando um pouco o requisito 'no SVG', você pode dessaturar imagens no Firefox usando apenas um único arquivo SVG e algum CSS.

Seu arquivo SVG ficará assim:

<?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>

Salve isso como resources.svg, ele pode ser reutilizado a partir de agora para qualquer imagem que você queira alterar para escala de cinza.

No seu CSS, você faz referência ao filtro usando a filterpropriedade específica do Firefox :

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

Adicione os proprietários da MS também, se quiser, aplique essa classe a qualquer imagem que você deseja converter em escala de cinza (funciona no Firefox> 3.5, IE8) .

edit : Aqui está uma boa postagem no blog que descreve o uso da nova filterpropriedade CSS3 na resposta do SalmanPK em conjunto com a abordagem SVG descrita aqui. Usando essa abordagem, você acabaria com algo como:

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 */
}

Mais informações de suporte ao navegador aqui .

robertc
fonte
6
No webkit, você faz o seguinte: -webkit-filter: grayscale(100%);então isto: -webkit-filter: grayscale(0);para removê-lo.
SeanJA
@SeanJA Obrigado pela atualização, o WebKit começou a implementar essas coisas em dezembro
robertc
Eu o vejo no chrome beta no meu laptop linux e na minha máquina win7. Não parecia funcionar no chrome stable no linux (mas, novamente, é possível que a versão do linux esteja atrás do windows).
SeanJA
1
Esse método funciona bem para mim no Chrome, mas não tem efeito no Safari. No FF, está tornando minhas imagens invisíveis até pairar.
precisa saber é o seguinte
85

Para o Firefox, você não precisa criar um arquivo filter.svg, pode usar o esquema de URI de dados .

Adotar o código css da primeira resposta fornece:

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+ */

Tome cuidado para substituir a string "utf-8" pela codificação do arquivo.

Este método deve ser mais rápido que o outro, porque o navegador não precisará fazer uma segunda solicitação HTTP.

mquandalle
fonte
3
Apenas uma observação para evitar dores de cabeça: o Compressor YUI retira espaços nos URLs de dados. Portanto, você pode considerar usar outro minificador, se quiser usar esta solução.
Malte
6
@ Malte Ou talvez apenas substitua espaços por uma string "% 20"?
mquandalle
@mquandalle infelizmente IE10 não suporta filtro: cinza blogs.msdn.com/b/ie/archive/2011/12/07/...
Jedi.za
1
No Firefox, meu cinza é muito claro. Existe alguma maneira de aumentar o contraste ou escurecer um pouco? Outros navegadores estão ótimos.
square_eyes
27

Atualização: transformei isso em um repositório completo do GitHub, incluindo o polyfill JavaScript para IE10 e IE11: https://github.com/karlhorky/gray

Originalmente, usei a resposta do SalmanPK , mas criei a variação abaixo para eliminar a solicitação HTTP extra necessária para o arquivo SVG. O SVG embutido funciona no Firefox versões 10 e posteriores, e versões inferiores a 10 não representam mais 1% do mercado global de navegadores.

Desde então, tenho mantido a solução atualizada neste post do blog , adicionando suporte para o desbotamento das cores, suporte para o IE 10/11 com SVG e escala de cinza parcial na demonstração.

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%);
}
Karl Horky
fonte
14

Se você é capaz de usar JavaScript, esse script pode ser o que você está procurando. Ele funciona em vários navegadores e está funcionando bem para mim até agora. Você não pode usá-lo com imagens carregadas de um domínio diferente.

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

chrismacp
fonte
11

Só tenho o mesmo problema hoje. Inicialmente, usei a solução SalmanPK, mas descobri que o efeito difere entre o FF e outros navegadores. Isso ocorre porque a matriz de conversão funciona apenas com leveza e não com luminosidade, como filtros no Chrome / IE. Para minha surpresa, descobri que uma solução alternativa e mais simples no SVG também funciona no FF4 + e produz melhores resultados:

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

Com css:

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

Mais uma ressalva é que o IE10 não suporta mais "filter: grey:" no modo compatível com os padrões, portanto, é necessário alternar o modo de compatibilidade nos cabeçalhos para funcionar:

<meta http-equiv="X-UA-Compatible" content="IE=9" />
RobertT
fonte
2
Parece uma solução melhor e mais simples - seria bom se SalmanPK e mquandalle atualizassem suas soluções para isso. Aparentemente, a matriz que eles usam é quebrado <br> Aqui está a versão dados incorporado: filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");
psdie
11

A maneira mais simples de obter escala de cinza com CSS exclusivamente é através da filterpropriedade

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

A propriedade ainda não é totalmente suportada e ainda requer a -webkit-filterpropriedade para suporte em todos os navegadores.

NK Chaudhary
fonte
7

Parece que não é possível (ainda), mesmo com CSS3 ou propriedades proprietárias -webkit-ou -moz-CSS.

No entanto, encontrei este post de junho passado que usava filtros SVG em HTML. Não disponível em nenhum navegador atual (a demonstração sugeria uma compilação personalizada do WebKit), mas muito impressionante como prova de conceito.

Roman Nurik
fonte
7

Para as pessoas que estão perguntando sobre o suporte ignorado do IE10 + em outras respostas, confira este trecho de 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;
}

Aplicado nesta marcação:

<!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>

Para mais demonstrações, consulte a seção de gráficos CSS3 do IE testdrive e este blog antigo do IE http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Annie
fonte
7

No Internet Explorer, use a propriedade filter.

No webkit e no Firefox, atualmente não há como desatuar uma imagem apenas com CSS. portanto, você precisará usar canvas ou SVG para uma solução do lado do cliente.

Mas acho que usar SVG é mais elegante. confira minha postagem no blog para a solução SVG que funciona tanto para Firefox quanto para webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

E estritamente falando, já que SVG é HTML, a solução é pura html + css :-)

brillout
fonte
oi brillout. Notei que sua escala de cinza realmente falha no safari. Algum acompanhamento? Obrigado
cisne
1
SVG não é HTML. É uma especificação totalmente diferente.
Camilo Martin
1
@robertc Esse link é sobre como colocar um SVG em um HTML, mas aqui está a especificação SVG e a especificação HTML . O fato de que ambos são semelhantes entre si (ou, para XML) não significa que eles são a mesma coisa ...
Camilo Martin
1
Mas ele vincula à especificação SVG na referência ... Ele não define o SVG, apenas diz que os navegadores devem analisá-lo. É como Javascript ou CSS nesse sentido.
Camilo Martin
6

Uma nova maneira de fazer isso está disponível há algum tempo nos navegadores modernos.

O modo de mesclagem em segundo plano permite obter alguns efeitos interessantes, e um deles é a conversão em escala de cinza

A luminosidade do valor , definida em um fundo branco, permite isso. (passe o mouse para vê-lo em cinza)

.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>

A luminosidade é tirada da imagem, a cor é tirada do fundo. Como é sempre branco, não há cores.

Mas permite muito mais.

Você pode animar o efeito configurando 3 camadas. O primeiro será a imagem e o segundo será um gradiente branco-preto. Se você aplicar um modo de mesclagem múltipla, obterá um resultado branco como antes na parte branca, mas a imagem original na parte preta (multiplicar por branco dá branco, multiplicar por preto não tem efeito).

Na parte branca do gradiente, você obtém o mesmo efeito de antes. Na parte preta do gradiente, você está mesclando a imagem sobre si mesma, e o resultado é a imagem não modificada.

Agora, basta mover o gradiente para obter esse efeito dinâmico: (passe o mouse para vê-lo em cores)

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>

referência

matriz de compatibilidade

vals
fonte
1
@ Andy Comecei minha resposta dizendo em navegadores modernos
vals
Como você pode aplicar que, se uma imgtag é usada para a imagem nãobackground: url()
Mohammad Elbanna
1
@MohammadElbanna você precisa usar mix-mistura-mode, em vez de background-blend-mode
Vals
5
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
Amee
fonte
4

Talvez dessa maneira te ajude

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

w3schools.org

YuZA
fonte
3

Na verdade, é mais fácil fazê-lo com o IE se me lembro corretamente de usar uma propriedade CSS proprietária. Tente isso FILTER: Grayem http://www.ssi-developer.net/css/visual-filters.shtml

O método de Ax simplesmente torna a imagem transparente e tem um fundo preto por trás. Tenho certeza que você poderia argumentar que isso é em escala de cinza.

Embora você não queira usar o Javascript, acho que precisará usá-lo. Você também pode usar um idioma do lado do servidor para fazer isso.

alex
fonte
Eu nem tenho uma caixa do Windows, então obrigado, mas isso é de pouca utilidade para mim.
Ken
Nesse caso, você pode vê-lo com uma Máquina Virtual com o IE, implementar o método de ax ou usar canvas ... observe que o escala de cinza em imagens grandes com canvas pode ser bastante desgastante para o mecanismo Javascript.
alex
7
filter: grayestá presente no Internet Explorer desde a versão 4 . Eles exigiram muita porcaria do produto - com razão! - mas eles foram realmente à frente de seu tempo com essas coisas
Pekka
2

Se você deseja usar Javascript, pode usar uma tela para converter a imagem em escala de cinza. Desde o suporte ao Firefox e Safari <canvas>, ele deve funcionar.

Então, pesquisei em "escala de cinza de tela" e o primeiro resultado foi http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html, que parece funcionar.

Shalom Craimer
fonte
2

foi adicionado suporte para filtros CSS nativos no webkit a partir da versão atual 19.0.1084.46

então -webkit-filter: grayscale (1) funcionará e é mais fácil do que a abordagem SVG para webkit ...

hjindal
fonte
2

Aqui está um mixin para MENOS que permitirá que você escolha qualquer opacidade. Preencha você mesmo as variáveis ​​para obter CSS simples em diferentes porcentagens.

Dica interessante aqui , ele usa o tipo saturado para a matriz, para que você não precise fazer nada sofisticado para alterar a porcentagem.

.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);
}

Então use-o:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}
James van Dyke
fonte
2

Você não precisa usar tantos prefixos para uso total, porque se você escolher o prefixo para o Firefox antigo, não precisará usar o prefixo para o novo Firefox.

Portanto, para uso total, basta usar este código:

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%);
}
mao
fonte
2

Como complemento às respostas de outros, é possível dessaturar uma imagem no meio do caminho no FF sem as dores de cabeça da matriz do SVG :

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

Onde $vestá entre 0e 1. É equivalente a filter:grayscale(50%);.

Exemplo ao vivo:

Referência no MDN

Bigood
fonte
1

Com base na resposta de robertc :

Para obter uma conversão adequada da imagem colorida para a escala de cinza, em vez de usar uma matriz como esta:

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

Você deve usar a matriz de conversão como esta:

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

Isso deve funcionar bem para todos os tipos de imagens baseadas no modelo RGBA (vermelho-verde-azul-alfa).

Para obter mais informações sobre por que você deve usar a matriz, postei mais provavelmente que o robertc verifique os seguintes links:

Kajiyama
fonte
Eu concordo que 0.3333 está errado; 0.2126 0.7152 0.0722 0 0parece ser o equivalente a<fecolormatrix type="saturate" values="0">
Neil
O link para "E aqui você encontra alguns códigos C # e VB" pode ser encontrado no arquivo da Internet aqui: web.archive.org/web/20110220101001/http://www.bobpowell.net/…
thisgeek
O link para "Os sinais de luminância e diferença de cor" também está quebrado. Não consegui encontrar um substituto.
thisgeek
0

Uma solução terrível, mas viável: renderize a imagem usando um objeto Flash, que fornece todas as transformações possíveis no Flash.

Se seus usuários estiverem usando navegadores de última geração e se o Firefox 3.5 e o Safari 4 o suportarem (não sei / o que faz / o fará), você pode ajustar o atributo CSS -profile da imagem, configurando-o para um ICC em escala de cinza URL do perfil. Mas isso é muito se!

richardtallent
fonte
0

ser uma alternativa para o navegador mais velho poderia ser a máscara de uso produzido por pseudo-elementos ou tags inline.

O posicionamento absoluto ao passar o mouse sobre um img (ou área de texto que não precisa de clique nem seleção) pode imitar de perto os efeitos da escala de cores, via rgba () ou png translúcido .

Não fornecerá uma única escala de cores, mas matizará as cores fora do intervalo.

teste em caneta de código com 10 cores diferentes via pseudo-elemento; por último, cinza. http://codepen.io/gcyrillus/pen/nqpDd (atualize para mudar para outra imagem)

G-Cyrillus
fonte
0

Experimente este plugin jquery. Embora não seja uma solução HTML e CSS pura, é uma maneira lenta de conseguir o que deseja. Você pode personalizar sua escala de cinza para melhor se adequar ao seu uso. Use-o da seguinte forma:

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

Há uma demonstração interativa . Você pode brincar com isso.

Confira a documentação sobre o uso, é bastante simples. docs

Nicholas TJ
fonte
0

Para escala de cinza como porcentagem no Firefox, use o filtro saturar : (pesquise 'saturar')

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"
dval
fonte
-1

Se você ou outra pessoa que enfrenta um problema semelhante no futuro estiver aberto ao PHP. (Eu sei que você disse HTML / CSS, mas talvez você já esteja usando PHP no back-end) Aqui está uma solução PHP:

Peguei na biblioteca PHP GD e adicionei algumas variáveis ​​para automatizar o processo ...

<?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);

?>
Trufa
fonte
4
@ Tom, com base nos votos e favoritos na pergunta original, o OP não é a única pessoa que se perguntou se isso é possível. Claro, essa resposta pode alterar as regras, mas não vejo sentido em votar abaixo de uma resposta que possa ser útil para muitas pessoas.
Michael Martin-Smucker 26/10/10
1
@ Tom, embora eu possa não ser uma resposta exata à pergunta, ela pode ser útil, pois realmente "resolve" o problema da escala de cinza sem o "incômodo" do javascript, talvez ele nem tenha considerado ou sabia sobre PHP GD, nenhum dano pretendido. @ mlms13 Esse foi o ponto exatamente, obrigado :)
Trufa
Essa é minha opinião "ruim" sobre o fato de outros usuários poderem se beneficiar dessa publicação que escapou da minha mente .. Desculpas @Trufa.
sacudida
3
Isso me ajudou a me colocar no caminho certo depois de alguns outros becos sem saída. Eu descobri que usando "imagefilter ($ source, IMG_FILTER_GRAYSCALE);" deu um resultado muito melhor. (Somente PHP 5)
chrismacp
5
Votado, já que é praticamente fora de tópico. Escalar em escala de cinza uma imagem no servidor é completamente diferente de CSS / HTML.
Simon Steinberger