Comment obtenir la valeur RVB de la couleur nommée CSS/HTML en JavaScript

Question

J'ai créé un objet Javascript nommé [name-rgb]. Vos bases :

namedColors = {
  AliceBlue: [240, 248, 255],
  AntiqueWhite: [250, 235, 215],
  ...

Objet. Mais j'ai réalisé que je devrais pouvoir saisir une chaîne de nom, par exemple "AliceBlue", et demander à JavaScript d'en trouver une sorte de représentation RVB (hex fonctionnerait également). Je sais qu'il existe au moins 140 couleurs nommées cachées dans les navigateurs, mais je n'arrive pas à les trouver.

Existe-t-il une astuce CSS ou "style=..." qui me permet de trouver la représentation RVB d'un nom de couleur ?

Answer 1

C'est la solution que j'ai finalement trouvée. Je me rends compte qu'il existe deux types de couleurs : les chaînes CSS et les tableaux de type webgl (généralement 4 flottants ou entiers, selon la situation).

Oubliez ça, laissez le navigateur le gérer : créez un canevas 1x1, remplissez-le avec n'importe quelle couleur de chaîne, récupérez les pixels et déconstruisez-le en un tableau rgba. Vous trouverez ci-dessous deux utilitaires permettant de créer un canevas 1x1 2D ctx.

#根据任何合法的CSS颜色返回一个RGB数组，否则返回null。
#http://www.w3schools.com/cssref/css_colors_legal.asp
#字符串可以是CadetBlue，#0f0，rgb(255,0,0)，hsl(120,100%,50%)
#rgba/hsla形式也可以，但我们不返回a。
#注意：浏览器自己说话：我们只需将1x1的画布fillStyle设置为字符串并创建一个像素，返回r,g,b值。
#警告：r=g=b=0可能表示非法字符串。我们测试了一些明显的情况，但要注意意外的[0,0,0]结果。
ctx1x1: u.createCtx 1, 1 #跨调用共享。闭包封装更好吗？
stringToRGB: (string) ->
  @ctx1x1.fillStyle = string
  @ctx1x1.fillRect 0, 0, 1, 1
  [r, g, b, a] = @ctx1x1.getImageData(0, 0, 1, 1).data
  return [r, g, b] if (r+g+b isnt 0) or
    (string.match(/^black$/i)) or
    (string in ["#000","#000000"]) or
    (string.match(/rgba{0,1}\(0,0,0/i)) or
    (string.match(/hsla{0,1}\(0,0%,0%/i))
  null

Ce que j'aime, c'est que le navigateur parle de lui-même. N'importe quelle chaîne légale fonctionnera bien. Le seul inconvénient est que si la chaîne est illégale, vous obtiendrez du noir, donc quelques vérifications doivent être effectuées. La vérification des erreurs n'est pas géniale, mais je n'en ai pas besoin dans mon utilisation.

Fonctions utilitaires :

#创建一个给定宽度/高度的新画布
createCanvas: (width, height) ->
  can = document.createElement 'canvas'
  can.width = width; can.height = height
  can
#与上述相同，但返回上下文对象。
#注意ctx.canvas是ctx的画布，可以用作图像。
createCtx: (width, height) ->
  can = @createCanvas width, height
  can.getContext "2d"

Answer 2

La fonction JavaScript la plus simple :

function nameToRgba(name) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.fillStyle = name;
    context.fillRect(0,0,1,1);
    return context.getImageData(0,0,1,1).data;
}