So erhalten Sie den RGB-Wert einer CSS/HTML-benannten Farbe in JavaScript

Question

Ich habe ein Javascript-Objekt namens [name-rgb] erstellt. Deine Basics:

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

Objekt. Aber mir wurde klar, dass ich in der Lage sein sollte, eine Namenszeichenfolge einzugeben, beispielsweise „AliceBlue“, und JavaScript eine Art RGB-Darstellung davon finden zu lassen (Hex würde auch funktionieren). Ich weiß, dass es in Browsern mindestens 140 versteckte benannte Farben gibt, aber ich kann sie anscheinend nicht finden.

Gibt es einen CSS- oder „style=…“-Trick, der es mir ermöglicht, die RGB-Darstellung eines Farbnamens zu finden?

Answer 1

这是我最终得出的解决方案。我意识到颜色有两种类型：css字符串和webgl类型数组（通常是4个浮点数或整数，具体取决于情况）。

算了，让浏览器自己处理吧：创建一个1x1的画布，用任何字符串颜色填充它，获取像素，并将其解构为rgba数组。下面有两个实用工具，用于创建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

我喜欢它的地方在于浏览器自己说话。任何合法的字符串都可以正常工作。唯一的缺点是，如果字符串非法，你会得到黑色，所以需要做一些检查。错误检查不是很好，但在我的使用中不需要它。

实用工具函数：

#创建一个给定宽度/高度的新画布
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

最简单的JavaScript函数：

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