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