Converter uma imagem em escala de cinza em HTML / CSS

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?

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 .

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 .

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.

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

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/

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

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.

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.

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

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 :-)

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

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

Talvez dessa maneira te ajude

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

w3schools.org

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.

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.

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

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

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

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:

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

Referência no MDN

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:

• Os sinais de diferença de luminância e cor
• Resposta da Margus para a pergunta: "greyscalevalue in colorvalue" @stackoverflow parte: Edição 2: @Hans Passant
• Charles A. Bouman - Universidade de Purdue - TV analógica página 20 e 21
• E aqui você pode encontrar alguns códigos C # e VB

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!

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)

Você pode usar uma das funções do jFunc - use a função "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx

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

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"

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

?>