Convierta una imagen a escala de grises en HTML / CSS

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

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

Sé que puedo hacerlo tanto con SVG como con Canvas, pero parece mucho trabajo en este momento.

¿Hay alguna forma de hacer esto para una persona realmente perezosa?

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

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

Su archivo SVG se verá así:

       

Guárdelo como resources.svg, se puede reutilizar a partir de ahora para cualquier imagen que desee cambiar a escala de grises.

En su CSS hace referencia al filtro usando la propiedad de filter específica de Firefox:

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

Agregue también los propietarios de MS 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 propiedad de filter 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 .

Tomando el código css de la primera respuesta da:

 filter: url("data:image/svg+xml;utf8,#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 encoding de su archivo.

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

Actualización: hice esto en un repository completo de GitHub, que incluye el relleno de JavaScript para IE10 e IE11: https://github.com/karlhorky/gray

Originalmente utilicé 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 10 ya no representan ni el 1% del mercado global de navegadores.

Desde entonces, he mantenido la solución actualizada en esta publicación de blog , añadiendo soporte para volver al color, compatibilidad con 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,#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 con navegador cruzado 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 solo funciona con la luminosidad y no con la luminosidad, como los filtros en Chrome / IE. Para mi sorpresa, descubrí que una solución alternativa y más simple en SVG también funciona en FF4 + y produce mejores resultados:

      

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 el modo compatible con estándares, por lo que necesita el cambio de modo de compatibilidad en los encabezados para funcionar:

  

No parece que sea posible (aún), incluso con CSS3 o propiedade -webkit- o -moz- CSS.

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

Para las personas que preguntan sobre el soporte ignorado de IE10 + en otras respuestas, revisen esta pieza de CSS:

 img.grayscale:hover { filter: url("data:image/svg+xml;utf8,#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:

    Grayscaling in Internet Explorer 10+   

IE10 with inline SVG

Para obtener más demos, consulte la sección Gráficos CSS3 de IE testdrive y este viejo blog de IE http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

En Internet Explorer usa la propiedad de filtro.

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

Pero creo que usar SVG es más elegante. echa un vistazo a la publicación de mi 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, dado que SVG es HTML, la solución es pura html + css 🙂

La forma más simple de lograr escala de grises con CSS exclusivamente es a través de la propiedad del filter .

 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 propiedad -webkit-filter para soporte en todos los navegadores.

Una nueva forma de hacer esto 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 de escala de grises

El valor de luminosidad , establecido en un fondo blanco, lo permite. (desplace 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; } 
 

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 correctamente el uso de una propiedad de CSS propietaria. Pruebe este FILTER: Gray de 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ías argumentar que esto es en escala de grises.

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

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

Así que busqué en Google “canvas escala de grises”, y el primer resultado fue http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html que parece funcionar.

la compatibilidad con los filtros CSS nativos en webkit se ha agregado desde la versión actual 19.0.1084.46

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

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

Una pista clara aquí , usa el tipo de saturación para la matriz, por lo que no es necesario hacer nada elegante para cambiar el porcentaje.

 .saturate(@value:0) { @percent: percentage(@value); filter: url("data:image/svg+xml;utf8,#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 es necesario usar tantos prefijos para usarlos por completo, ya que 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 lo suficiente:

 img.grayscale { filter: url("data:image/svg+xml;utf8,#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,#grayscale"); filter: none; -webkit-filter: grayscale(0%); } 
 img { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } 

Basado en la respuesta de robertc :

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

Debe 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 que publiqué, es más probable que la única verificación de robertc siga a los enlaces:

  • Las señales de diferencia de luminancia y color
  • La respuesta de Margus a la pregunta: “greyscalevalue in colorvalue” @stackoverflow parte: Edit 2: @Hans Passant
  • Charles A. Bouman – Universidad de Purdue – TV analógica página 20 y 21
  • Y aquí puedes encontrar algunos códigos C # y VB

Como complemento de las respuestas de los demás, es posible desaturar una imagen a mitad de camino en FF sin los dolores de cabeza de la matriz de SVG:

  

Donde $v está entre 0 y 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"; } 
      
Original
Half grayed

Una solución terrible pero factible: renderizar la imagen usando un objeto Flash, que luego le da todas las transformaciones posibles en Flash.

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

ser Una alternativa para el navegador más antiguo podría ser usar máscara producida por pseudo-elementos o tags en línea.

La posición absoluta sobre una img (o área de texto que no necesita clic ni selección) puede imitar de cerca los efectos de la escala de colores, a través de rgba () o translúcido png .

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

prueba en el lápiz de códigos con 10 colores diferentes a través de pseudo-elemento, el último es gris. http://codepen.io/gcyrillus/pen/nqpDd (recargar 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

Pruebe este plugin jquery. Sin embargo, esta no es una solución pura de HTML y CSS, 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. documentos

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 back-end) Aquí hay una solución de PHP:

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

  

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,#saturate"