2016-04-18 23 views
5

Beh, ho bisogno di fare un piccolo progetto in webgl e ho bisogno di passare il colore dall'html alla javascript, il fatto è che ho bisogno di quel colore in Rgb per lavorare direttamente con webGl, quello di cui ho bisogno sapere è se c'è un modo di usare html5 per ottenere il colore in rgb dall'input.Html ottenere colore in Rgb

sto facendo questo:

<input type="color" onchange="cor()" id="color"> 

il prob qui è se provo ad ottenere questo colore mi dà il valore esadecimale, so che tramite javascript con una funzione posso convertire il formato esadecimale a rgb ma io bisogno di sapere se c'è un modo più semplice per fare questo e mettere al lavoro.

risposta

5

Fortunatamente i valori di colore in HTML5 sono validi solo se sono nel formato #XXXXXX (ovvero rgb(...) e #XXX non sono validi). Possiamo usare questo a nostro vantaggio come abbiamo sempre sappiamo esattamente dove le posizioni RGB saranno nel valore risultante:

#XXXXXX 
#RRGGBB 

per convertire questo a rgb(...), abbiamo semplicemente bisogno di togliere il carattere # e convertire il RR, GG e BB valori decimali:

// #XXXXXX -> ["XX", "XX", "XX"] 
var value = value.match(/[A-Za-z0-9]{2}/g); 

// ["XX", "XX", "XX"] -> [n, n, n] 
value = value.map(function(v) { return parseInt(v, 16) }); 

// [n, n, n] -> rgb(n,n,n) 
return "rgb(" + value.join(",") + ")"; 

e con la bellezza di JavaScript, siamo in grado di fare tutto questo in una sola riga di codice:

return "rgb(" + "#FF0000".match(/[A-Za-z0-9]{2}/g).map(function(v) { return parseInt(v, 16) }).join(",") + ")"; 
-> "rgb(255,0,0)" 
+2

grazie, quindi molto miglioramento su Html5 perché non inseriscono un inputType = RgbColor o qualcosa del genere –

+0

@FilipeCosta probabilmente perché ci sono un * lotto * di diversi tipi di colore. La notazione esadecimale stessa ha 4 formati riconosciuti di cui sono a conoscenza ('# RGB',' # RGBA', '# RRGGBB' e' # RRGGBBAA'). Dovrebbero essere lunghe discussioni su quali formati dovrebbero essere accettati. Immagino che probabilmente vedremo qualcosa di simile in una futura edizione di HTML. –