Convertir una imagen a escala de grises en HTML / CSS

¿Hay una manera simple de mostrar un mapa de bits de color en escala de grises con solo HTML/CSS?

No necesita ser compatible con IE (e imagino que no lo será); si funciona en FF3 y / o Sf3, eso es lo suficientemente bueno para mí.

Sé que puedo hacerlo con ambos SVGy Canvas, pero eso parece mucho trabajo en este momento.

¿Hay una manera realmente perezosa de hacer esto?

El soporte para filtros CSS ha aterrizado en Webkit. Entonces ahora tenemos una solución de navegador cruzado.

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

¿Qué pasa con Internet Explorer 10?

Puedes usar un polyfill como el gris .

Siguiendo la respuesta de brillout.com , y también la respuesta de Roman Nurik , y relajando un poco el requisito de 'no SVG', puede desaturar imágenes en Firefox usando solo un solo archivo SVG y algo de CSS.

Su archivo SVG se verá así:

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

Guarde eso como resources.svg, se puede reutilizar de ahora en adelante para cualquier imagen que desee cambiar a escala de grises.

En su CSS, hace referencia al filtro utilizando la filterpropiedad específica de Firefox :

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

Agregue los propietarios de MS también si lo desea, aplique esa clase a cualquier imagen que desee convertir a escala de grises (funciona en Firefox> 3.5, IE8) .

editar : Aquí hay una buena publicación de blog que describe el uso de la nueva filterpropiedad CSS3 en la respuesta de SalmanPK en concierto con el enfoque SVG descrito aquí. Usando ese enfoque terminarías con 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 */
}

Más información de soporte del navegador aquí .

Para Firefox no necesita crear un archivo filter.svg, puede usar el esquema de URI de datos .

Tomar el código CSS de la primera respuesta da:

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

Tenga cuidado de reemplazar la cadena "utf-8" por la codificación de su archivo.

Este método debería ser más rápido que el otro porque el navegador no necesitará hacer una segunda solicitud HTTP.

Actualización: hice esto en un repositorio completo de GitHub, incluido el polyfill de JavaScript para IE10 e IE11: https://github.com/karlhorky/gray

Originalmente usé la respuesta de SalmanPK , pero luego creé la variación a continuación para eliminar la solicitud HTTP adicional requerida para el archivo SVG. El SVG en línea funciona en las versiones 10 y superiores de Firefox, y las versiones inferiores a la 10 ya no representan ni siquiera el 1% del mercado global de navegadores.

Desde entonces, he mantenido la solución actualizada en esta publicación de blog , agregando soporte para volver a desaparecer el color, soporte de IE 10/11 con SVG y escala de grises parcial en la demostración.

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

Si puede usar JavaScript, entonces este script puede ser lo que está buscando. Funciona en varios navegadores y funciona bien para mí hasta ahora. No puede usarlo con imágenes cargadas desde un dominio diferente.

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

Acabo de tener el mismo problema hoy. Inicialmente utilicé la solución SalmanPK, pero descubrí que el efecto difiere entre FF y otros navegadores. Esto se debe a que la matriz de conversión funciona solo en la luminosidad, no en la luminosidad como los filtros en Chrome / IE. Para mi sorpresa, descubrí que la solución alternativa y más simple en SVG también funciona en FF4 + y produce mejores resultados:

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

Con css:

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

Una advertencia más es que IE10 ya no es compatible con "filter: gray:" en modo compatible con los estándares, por lo que necesita cambiar el modo de compatibilidad en los encabezados para funcionar:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

La forma más sencilla de lograr escala de grises con CSS exclusivamente es a través de la filterpropiedad.

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

La propiedad aún no es totalmente compatible y aún requiere la -webkit-filterpropiedad para soporte en todos los navegadores.

No parece que sea posible (todavía), incluso con CSS3 o propiedades propietarias -webkit-o -moz-CSS.

Sin embargo, encontré esta publicación del pasado junio que usaba filtros SVG en HTML. No está disponible en ningún navegador actual (la demostración insinuó una compilación de WebKit personalizada), pero es muy impresionante como prueba de concepto.

Para las personas que preguntan sobre el soporte ignorado de IE10 + en otras respuestas, consulte esta pieza 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 en este marcado:

<!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 obtener más demostraciones, consulte la sección de gráficos CSS3 de IE testdrive y este antiguo blog de IE http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

En Internet Explorer, use la propiedad de filtro.

En webkit y Firefox actualmente no hay forma de desatuarte una imagen únicamente con CSS. por lo tanto, deberá usar lienzo o SVG para una solución del lado del cliente.

Pero creo que usar SVG es más elegante. mira mi publicación de blog para la solución SVG que funciona tanto para Firefox como para webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

Y estrictamente hablando, ya que SVG es HTML, la solución es puramente html + css :-)

Una nueva forma de hacerlo ha estado disponible desde hace algún tiempo en los navegadores modernos.

background-blend-mode le permite obtener algunos efectos interesantes, y uno de ellos es la conversión en escala de grises

El valor de luminosidad , establecido sobre un fondo blanco, lo permite. (pase el cursor para verlo en gris)

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

La luminosidad se toma de la imagen, el color se toma del fondo. Como siempre es blanco, no hay color.

Pero permite mucho más.

Puede animar el efecto configurando 3 capas. La primera será la imagen, y la segunda será un degradado blanco-negro. Si aplica un modo de mezcla múltiple en esto, obtendrá un resultado blanco como antes en la parte blanca, pero la imagen original en la parte negra (multiplicar por blanco da blanco, multiplicar por negro no tiene efecto).

En la parte blanca del gradiente, obtienes el mismo efecto que antes. En la parte negra del gradiente, está mezclando la imagen sobre sí misma, y ​​el resultado es la imagen no modificada.

Ahora, todo lo que se necesita es mover el gradiente para obtener este efecto dinámico: (pase el mouse para verlo en color)

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>

referencia

matriz de compatibilidad

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

Quizás de esta manera te ayude

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

w3schools.org

De hecho, es más fácil hacerlo con IE si recuerdo haber usado correctamente una propiedad CSS propietaria. Pruebe esto FILTER: Graydesde http://www.ssi-developer.net/css/visual-filters.shtml

El método de Ax simplemente hace que la imagen sea transparente y tiene un fondo negro detrás. Estoy seguro de que podría argumentar que esto es en escala de grises.

Aunque no quería usar Javascript, creo que tendrá que usarlo. También podría usar un lenguaje del lado del servidor para hacerlo.

Si está dispuesto a usar Javascript, puede usar un lienzo para convertir la imagen a escala de grises. Dado que Firefox y Safari son compatibles <canvas>, debería funcionar.

Así que busqué en Google "Canvas Grayscale", y el primer resultado fue http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html que parece funcionar.

El soporte para filtros CSS nativos en webkit se ha agregado desde la versión actual 19.0.1084.46

entonces -webkit-filter: escala de grises (1) funcionará y es más fácil que el enfoque SVG para webkit ...

Aquí hay un mixin para MENOS que le permitirá elegir cualquier opacidad. Complete las variables usted mismo para CSS simple en diferentes porcentajes.

Sugerencia clara aquí , utiliza el tipo de saturación para la matriz, por lo que no necesita hacer nada elegante para cambiar el porcentaje.

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

Entonces úsalo:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}

No necesita usar tantos prefijos para un uso completo, porque si elige el prefijo para el viejo Firefox, no necesita usar el prefijo para el nuevo Firefox.

Entonces, para un uso completo, use 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 a las respuestas de otros, es posible desaturar una imagen hasta la mitad en FF sin los dolores de cabeza de la matriz de SVG :

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

Dónde $vestá entre 0y 1. Es equivalente a filter:grayscale(50%);.

Ejemplo en 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>

Referencia sobre MDN

Basado en la respuesta de robertc :

Para obtener la conversión adecuada de una imagen en color a una imagen en escala de grises en lugar de usar una 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

Debería usar una matriz de conversión 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

Esto debería funcionar bien para todos los tipos de imágenes basadas en el modelo RGBA (rojo-verde-azul-alfa).

Para obtener más información sobre por qué debería usar la matriz, publiqué más probabilidades de que el único control de Robertbert siga los siguientes enlaces:

• Las señales de luminancia y diferencia de color.
• La respuesta de Margus a la pregunta: "valor de escala de grises en valor de color" @stackoverflow parte: Edición 2: @Hans Passant
• Charles A. Bouman - Universidad de Purdue - TV analógica páginas 20 y 21
• Y aquí puedes encontrar algunos códigos C # y VB

Una solución terrible pero factible: renderiza la imagen usando un objeto Flash, que luego te brinda todas las transformaciones posibles en Flash.

Si sus usuarios usan navegadores de última generación y si Firefox 3.5 y Safari 4 lo admiten (no sé si lo hacen / lo harán), puede ajustar el atributo de perfil de color CSS de la imagen, configurándolo en una ICC en escala de grises URL del perfil. ¡Pero eso es mucho si!

ser una alternativa para el navegador más antiguo podría ser la máscara de uso producido por los pseudo-elementos o etiquetas en línea.

El posicionamiento absoluto al pasar el mouse sobre un img (o área de texto que no necesita clic ni selección) puede imitar de cerca los efectos de la escala de color, a través de rgba () o translucide png .

No dará una sola escala de color, pero sombreará el color fuera de rango.

prueba en lápiz de código con 10 colores diferentes a través de pseudo-elemento, el último es gris. http://codepen.io/gcyrillus/pen/nqpDd (vuelva a cargar para cambiar a otra imagen)

Puede usar una de las funciones de jFunc: use la función "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx

Prueba este plugin jquery. Sin embargo, esta no es una solución HTML y CSS pura, pero es una forma perezosa de lograr lo que desea. Puede personalizar su escala de grises para que se adapte mejor a su uso. Úselo de la siguiente manera:

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

Hay una demostración interactiva . Puedes jugar con eso.

Consulte la documentación sobre el uso, es bastante simple. docs

Para la escala de grises como porcentaje en Firefox, use el filtro de saturación en su lugar: (busque '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"

Si usted u otra persona que enfrenta un problema similar en el futuro están abiertos a PHP. (Sé que dijiste HTML / CSS, pero tal vez ya estás usando PHP en el backend) Aquí hay una solución PHP:

Lo obtuve de la biblioteca PHP GD y agregué algunas variables para automatizar el proceso ...

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

?>