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

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

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

So che posso farlo sia con SVG che con Canvas, ma al momento sembra molto lavoro.

C’è 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; } 
      

    Seguendo la risposta di brillout.com , e anche la risposta di Roman Nurik , e rilassando un po ‘il requisito’ no SVG ‘, è ansible desaturare le immagini in Firefox usando solo un singolo file SVG e alcuni CSS.

    Il tuo file SVG sarà simile a questo:

           

    Salvalo come resources.svg, può essere riutilizzato d’ora in poi per qualsiasi immagine che vuoi cambiare in scala di grigi.

    Nel tuo CSS fai riferimento al filtro usando la proprietà del filter specifico di Firefox:

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

    Aggiungi anche quelli proprietari di MS, se vuoi, applica quella class a qualsiasi immagine che desideri convertire in scala di grigi (funziona in Firefox> 3.5, IE8) .

    modifica : ecco un bel post sul blog che descrive l’utilizzo della nuova proprietà del filter CSS3 nella risposta di SalmanPK in accordo con l’approccio SVG descritto qui. Usando questo approccio ti ritroverai con qualcosa di simile:

     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 sul supporto del browser qui .

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

    Riprendendo il codice css della prima risposta si ottiene:

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

    Abbi cura di sostituire la stringa “utf-8” con la codifica dei file.

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

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

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

    Da allora ho aggiornato la soluzione su questo post del blog , aggiungendo il supporto per il fading a colors, il supporto per 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,#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 usare JavaScript, allora questo script potrebbe essere quello che stai cercando. Funziona su browser e sta funzionando bene per me finora. Non è ansible utilizzarlo 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:

          

    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à conforms agli standard, quindi è necessario cambiare la modalità di compatibilità nelle intestazioni per funzionare:

      

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

    Tuttavia, ho trovato questo post dello scorso giugno che utilizzava i filtri SVG su HTML. Non disponibile in nessun browser corrente (la demo ha suggerito un build WebKit personalizzato), ma molto impressionante come prova del concetto.

    Per le persone che stanno chiedendo il supporto IE10 + ignorato in altre risposte, controlla questa parte di 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; } 

    Applicato su questo markup:

        Grayscaling in Internet Explorer 10+   

    IE10 with inline SVG

    Per ulteriori demo, controlla la sezione grafica CSS3 di IE testdrive e questo vecchio blog di 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 esiste attualmente alcun modo di desatuare un’immagine esclusivamente con i CSS. quindi sarà necessario utilizzare canvas o SVG per una soluzione lato client.

    Ma penso che l’uso di SVG sia più elegante. controlla il post sul mio 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 in senso stretto dal momento che SVG è HTML la soluzione è pura html + css 🙂

    Il modo più semplice per ottenere la scala di grigi con i CSS è esclusivamente tramite la proprietà filter .

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

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

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

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

    La luminosità del valore, impostata 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; } 
     

    Forse in questo modo ti può aiutare

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

    w3schools.org

    In effetti, è più facile farlo con IE se ricordo di aver usato correttamente una proprietà CSS proprietaria. Prova questo FILTER: Gray da http://www.ssi-developer.net/css/visual-filters.shtml

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

    Anche se non volevi usare Javascript, penso che dovrai usarlo. Puoi anche usare un linguaggio lato server per farlo.

    Se sei disposto ad usare Javascript, puoi usare una canvas per convertire l’immagine in scala di grigi. Poiché Firefox e Safari supportano , dovrebbe funzionare.

    Ho quindi cercato su google “in scala di grigi” e il primo risultato è stato http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html che sembra funzionare.

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

    so -webkit-filter: la scala di grigi (1) funzionerà e quale è più facile dell’approccio SVG per il webkit …

    Ecco un mixin per LESS che ti permetterà di scegliere qualsiasi opacità. Inserisci le variabili per un semplice CSS a percentuali diverse.

    Suggerimento qui , usa il tipo saturo per la matrice in modo da non aver bisogno di fare niente per cambiare la percentuale.

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

    Quindi usalo:

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

    Non è necessario utilizzare tanti prefissi per l’uso completo, perché se si sceglie il prefisso per il vecchio firefox, non è necessario utilizzare il prefisso per il nuovo firefox.

    Quindi per il pieno utilizzo, basta usare questo codice:

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

    Basato sulla risposta di robertc :

    Per ottenere una conversione corretta dall’immagine colorata all’immagine in scala di grigi invece di utilizzare la matrice come questa:

     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 

    Dovresti usare 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 maggiori informazioni sul motivo per cui dovresti usare matrix, ho postato più probabile che l’unico controllo di robertc sia il seguente:

    • I segnali di luminanza e differenza di colore
    • La risposta di Margus alla domanda: “greyscalevalue in colorvalue” @stackoverflow parte: Edit 2: @Hans Passant
    • Charles A. Bouman – Purdue university – Analog TV pagina 20 e 21
    • E qui puoi trovare alcuni codici C # e VB

    Come complemento alle altre risposte, è ansible desaturare un’immagine a metà strada su FF senza il mal di testa della matrice SVG:

      

    Dove $v è compreso tra 0 e 1 . È equivalente al filter:grayscale(50%); .

    Esempio dal 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 soluzione terribile ma praticabile: renderizza l’immagine utilizzando un object Flash, che ti offre 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 se lo fanno / lo faranno), potresti regolare l’attributo del profilo colore CSS dell’immagine, impostandolo su un ICC in scala di grigi Profilo URL. Ma questo è un sacco di se!

    be Un’alternativa per i browser più vecchi potrebbe essere quella di usare una maschera prodotta da pseudo-elementi o tag in linea.

    Posizionamento assoluto al passaggio del mouse su una img (o area di testo che non ha bisogno di clic o selezione) può simulare da vicino gli effetti della scala dei colors, tramite rgba () o traslucide png .

    Non darà una sola scala di colore, ma sfumerà il colore fuori gamma.

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

    Puoi usare una delle funzioni di jFunc – usa la funzione “jFunc_CanvasFilterGrayscale” http://jfunc.com/jFunc-functions.aspx

    Prova questo plugin jquery. Anche se, 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 intertriggers. Puoi giocare con esso.

    Controlla la documentazione sull’utilizzo, è piuttosto semplice. docs

    Se tu o qualcun altro che si trova ad affrontare un problema simile in futuro, sono aperti a PHP. (So ​​che hai detto HTML / CSS, ma forse stai già usando PHP nel back-end) Ecco una soluzione PHP:

    L’ho preso dalla libreria GD di PHP e ho aggiunto alcune variabili per automatizzare il processo …

      

    Per quanto riguarda la scala di grigi come percentuale in Firefox, usa invece il filtro saturo : (cerca ‘saturi’)

     filter: url("data:image/svg+xml;utf8,#saturate"