Converti un'immagine in scala di grigi in HTML / CSS

C'è un modo semplice per visualizzare una bitmap a colori in scala di grigi con solo HTML/CSS?

Non ha bisogno di essere compatibile con IE (e immagino che non lo sarà) - se funziona in FF3 e / o Sf3, è abbastanza buono per me.

So di poterlo fare con entrambi SVGe Canvas, ma al momento sembra un sacco di lavoro.

Esiste un modo veramente pigro per farlo?

Il supporto per i filtri CSS è arrivato in Webkit. Quindi ora abbiamo una soluzione cross-browser.

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

Che dire di Internet Explorer 10?

Puoi usare un polyfill come il grigio .

Seguendo la risposta di brillout.com , e anche la risposta di Roman Nurik , e attenuando in qualche modo il requisito "no SVG", è possibile desaturare le immagini in Firefox utilizzando solo un singolo file SVG e alcuni CSS.

Il tuo file SVG sarà simile al seguente:

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

Salvalo come resources.svg, da ora in poi può essere riutilizzato per qualsiasi immagine che desideri modificare in scala di grigi.

Nel tuo CSS fai riferimento al filtro usando la filterproprietà specifica di Firefox :

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

Aggiungi anche quelli proprietari di MS se ne hai voglia, applica quella classe a qualsiasi immagine che desideri convertire in scala di grigi (funziona con Firefox> 3.5, IE8) .

modifica : ecco un bel post sul blog che descrive l'uso della nuova filterproprietà CSS3 nella risposta di SalmanPK in concerto con l'approccio SVG descritto qui. Usando quell'approccio finiresti con qualcosa del tipo:

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

Ulteriori informazioni di supporto del browser qui .

Per Firefox non è necessario creare un file filter.svg, è possibile utilizzare lo schema URI dei dati .

Prendendo il codice CSS della prima risposta si ottiene:

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

Fare attenzione a sostituire la stringa "utf-8" con la codifica del file.

Questo metodo dovrebbe essere più veloce dell'altro perché il browser non dovrà eseguire una seconda richiesta HTTP.

Aggiornamento: l' ho trasformato in un repository GitHub completo, incluso il polyfill JavaScript per IE10 e IE11: https://github.com/karlhorky/gray

Inizialmente ho usato la risposta di SalmanPK , ma poi ho creato la variante seguente per eliminare la richiesta HTTP aggiuntiva richiesta per il file SVG. L'SVG in linea funziona nelle versioni 10 e successive di Firefox e le versioni precedenti alla 10 non rappresentano più nemmeno l'1% del mercato globale dei browser.

Da allora ho mantenuto la soluzione aggiornata su questo post del blog , aggiungendo il supporto per lo sbiadimento del colore, il supporto di IE 10/11 con SVG e la scala di grigi parziale nella demo.

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 sei in grado di utilizzare JavaScript, questo script potrebbe essere quello che stai cercando. Funziona su più browser e funziona bene per me finora. Non puoi usarlo con immagini caricate da un dominio diverso.

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

Ho appena avuto lo stesso problema oggi. Inizialmente ho usato la soluzione SalmanPK ma ho scoperto che l'effetto differisce tra FF e altri browser. Questo perché la matrice di conversione funziona solo sulla luminosità e non sulla luminosità come i filtri in Chrome / IE. Con mia sorpresa, ho scoperto che la soluzione alternativa e più semplice in SVG funziona anche in FF4 + e produce risultati migliori:

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

Un altro avvertimento è che IE10 non supporta più il "filtro: grigio:" in modalità conforme agli standard, quindi per funzionare è necessario cambiare la modalità di compatibilità nelle intestazioni:

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

Il modo più semplice per raggiungere la scala di grigi esclusivamente con CSS è tramite la filterproprietà.

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

La proprietà non è ancora completamente supportata e richiede comunque la -webkit-filterproprietà per il supporto su tutti i browser.

Non sembra possibile (ancora), anche con CSS3 o proprietà proprietarie -webkit-o -moz-CSS.

Tuttavia, ho trovato questo post dello scorso giugno che utilizzava filtri SVG su HTML. Non disponibile in nessun browser attuale (la demo ha suggerito una build WebKit personalizzata), ma molto impressionante come prova di concetto.

Per le persone che chiedono supporto per IE10 + ignorato in altre risposte, dai un'occhiata a questo pezzo di 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;
}

Applicato su questo markup:

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

Per ulteriori demo, consulta la sezione Grafica CSS3 di IE testdrive e questo vecchio blog IE http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

In Internet Explorer usa la proprietà filter.

In webkit e Firefox non è attualmente possibile desatuarte un'immagine esclusivamente con CSS. quindi dovrai utilizzare canvas o SVG per una soluzione lato client.

Ma penso che usare SVG sia più elegante. controlla il mio post sul blog per la soluzione SVG che funziona sia per Firefox che per il webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

E a rigor di termini poiché SVG è HTML, la soluzione è pura HTML + CSS :-)

Un nuovo modo per farlo è disponibile da qualche tempo sui browser moderni.

background-blend-mode ti consente di ottenere alcuni effetti interessanti e uno di questi è la conversione in scala di grigi

Il valore di luminosità , impostato su uno sfondo bianco, lo consente. (passa con il mouse per vederlo in grigio)

.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 luminosità è presa dall'immagine, il colore è preso dallo sfondo. Dal momento che è sempre bianco, non c'è colore.

Ma permette molto di più.

È possibile animare l'impostazione dell'effetto su 3 livelli. Il primo sarà l'immagine e il secondo sarà un gradiente bianco-nero. Se si applica una modalità di fusione multipla su questo, si otterrà un risultato bianco come prima sulla parte bianca, ma l'immagine originale sulla parte nera (moltiplicando per il bianco si ottiene il bianco, la moltiplicazione per il nero non ha alcun effetto).

Sulla parte bianca del gradiente, ottieni lo stesso effetto di prima. Sulla parte nera del gradiente, stai fondendo l'immagine su se stessa e il risultato è l'immagine non modificata.

Ora, tutto ciò che serve è spostare il gradiente per rendere dinamico questo effetto: (passa il mouse per vederlo a colori)

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>

riferimento

matrice di compatibilità

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

Forse in questo modo ti può aiutare

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

w3schools.org

È infatti più facile farlo con IE se ricordo di aver usato correttamente una proprietà CSS proprietaria. Prova questo FILTER: Grayda http://www.ssi-developer.net/css/visual-filters.shtml

Il metodo di Ax semplicemente rende l'immagine trasparente e ha uno sfondo nero dietro di essa. Sono sicuro che potresti obiettare che questa è in scala di grigi.

Anche se non volevi usare Javascript, penso che dovrai usarlo. È inoltre possibile utilizzare una lingua lato server per farlo.

Se sei disposto a utilizzare Javascript, puoi utilizzare un'area di disegno per convertire l'immagine in scala di grigi. Dal momento che supporto Firefox e Safari <canvas>, dovrebbe funzionare.

Così ho cercato su Google "canvas grayscale", e il primo risultato è stato http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html che sembra funzionare.

il supporto per i filtri CSS nativi in ​​webkit è stato aggiunto dalla versione corrente 19.0.1084.46

così -webkit-filter: la scala di grigi (1) funzionerà e che è più semplice dell'approccio SVG per il webkit ...

Ecco un mixin per MENO che ti permetterà di scegliere qualsiasi opacità. Inserisci tu stesso le variabili per un semplice CSS con percentuali diverse.

Suggerimento accurato qui , utilizza il tipo saturato per la matrice, quindi non è necessario fare nulla di speciale per modificare la percentuale.

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

Quindi usalo:

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

Non è necessario utilizzare così tanti prefissi per il pieno utilizzo, perché se si sceglie il prefisso per il vecchio Firefox, non è necessario utilizzare il prefisso per il nuovo Firefox.

Quindi, per un uso completo, basta usare questo codice:

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

Come complemento delle risposte degli altri, è possibile desaturare un'immagine a metà strada su FF senza il mal di testa della matrice SVG :

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

Dov'è $vtra 0e 1. È equivalente a filter:grayscale(50%);.

Esempio live:

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

Riferimento su MDN

Basato sulla risposta di robertc :

Per ottenere la conversione corretta dall'immagine colorata all'immagine in scala di grigi anziché utilizzare la matrice in questo modo:

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

È necessario utilizzare la matrice di conversione in questo modo:

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

Questo dovrebbe funzionare bene per tutti i tipi di immagini basate sul modello RGBA (rosso-verde-blu-alfa).

Per ulteriori informazioni sul motivo per cui dovresti usare la matrice, ho postato più probabilmente che quello di robertc controlla i seguenti link:

• I segnali di luminanza e differenza di colore
• La risposta di Margus alla domanda: "greyscalevalue in colorvalue" parte @stackoverflow: Modifica 2: @Hans Passant
• Charles A. Bouman - Università di Purdue - TV analogica pagina 20 e 21
• E qui puoi trovare alcuni codici C # e VB

Una soluzione terribile ma realizzabile: renderizza l'immagine usando un oggetto Flash, che ti dà quindi tutte le trasformazioni possibili in Flash.

Se i tuoi utenti utilizzano browser all'avanguardia e se Firefox 3.5 e Safari 4 lo supportano (non so che lo faranno / lo faranno), potresti regolare l' attributo del profilo colore CSS dell'immagine, impostandolo su un ICC in scala di grigi Profilo URL. Ma è un sacco di se!

essere Un'alternativa per il browser più vecchio potrebbe essere quella di utilizzare la maschera prodotta da pseudo-elementi o tag in linea.

Il posizionamento assoluto al passaggio del mouse su un img (o area di testo che non richiede clic o selezione) può imitare da vicino gli effetti della scala dei colori, tramite rgba () o translucide png .

Non fornirà una sola scala di colori, ma sfumerà i colori fuori dalla portata.

test su penna codice con 10 colori diversi tramite pseudo-elemento, l'ultimo è grigio. http://codepen.io/gcyrillus/pen/nqpDd (ricaricare per passare a un'altra immagine)

È possibile utilizzare una delle funzioni di jFunc: utilizzare la funzione "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx

Prova questo plugin jquery. Tuttavia, questa non è una soluzione HTML e CSS pura, ma è un modo pigro per ottenere ciò che desideri. Puoi personalizzare la tua scala di grigi per adattarla al meglio al tuo utilizzo. Usalo come segue:

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

C'è una demo interattiva . Puoi giocarci intorno.

Consulta la documentazione sull'utilizzo, è piuttosto semplice. docs

Per la scala di grigi in percentuale in Firefox, utilizzare invece il filtro saturato : (cercare 'saturare')

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 tu o qualcun altro dovrete affrontare un problema simile in futuro siete aperti a PHP. (So ​​che hai detto HTML / CSS, ma forse stai già utilizzando PHP nel backend) Ecco una soluzione PHP:

L'ho preso dalla libreria PHP GD e ho aggiunto alcune variabili per automatizzare il 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);

?>