Bagaimana untuk mendapatkan nilai RGB warna bernama CSS/HTML dalam JavaScript

Question

Saya telah mencipta objek Javascript bernama [name-rgb]. Asas anda:

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

Objek. Tetapi saya menyedari bahawa saya sepatutnya dapat memasukkan rentetan nama, sebut "AliceBlue", dan minta JavaScript mencari semacam perwakilan RGB daripadanya (hex akan berfungsi juga). Saya tahu terdapat sekurang-kurangnya 140 warna bernama tersembunyi dalam penyemak imbas, tetapi saya tidak dapat mencarinya.

Adakah terdapat helah CSS atau "style=..." yang membolehkan saya mencari perwakilan RGB bagi nama warna?

Answer 1

Ini adalah penyelesaian yang akhirnya saya buat. Saya menyedari bahawa terdapat dua jenis warna: rentetan css dan tatasusunan jenis webgl (biasanya 4 terapung atau integer, bergantung pada keadaan).

Lupakannya, biarkan penyemak imbas mengendalikannya: buat kanvas 1x1, isi dengan sebarang warna rentetan, dapatkan piksel dan nyahbinanya menjadi tatasusunan rgba. Di bawah ialah dua utiliti untuk mencipta ctx kanvas 1x1 2d.

#根据任何合法的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

Apa yang saya suka tentangnya ialah penyemak imbas bercakap untuk dirinya sendiri. Sebarang rentetan undang-undang akan berfungsi dengan baik. Satu-satunya kelemahan ialah jika rentetan itu menyalahi undang-undang, anda akan menjadi hitam, jadi beberapa semakan perlu dilakukan. Semakan ralat tidak bagus, tetapi saya tidak memerlukannya dalam penggunaan saya.

Fungsi utiliti:

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

Fungsi JavaScript paling mudah:

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