HTML5 INSIGHT


Решая свою, так сказать, локальную задачу столкнулся с такой головоломкой: как зная цвет элемента в виде CSS Color (фон или цвет текста), конвертировать этот цвет в компоненты RGB(A)?

То есть, вот имеем мы “#f00” или “#e5f000”, или “white”, или “rgb(30, 70, 90)”, как отсюда получить компоненты RGBA?

В поисках наткнулся на совершенно изящное решение с помощью HTML5 Canvas от Lea Verou. На странице блога Lea вы найдете ссылку на CSS.coloratum — готовое веб-приложение для конвертации цвета в разные форматы.

Мне же нужна была просто функция на JavaScript для конвертации цвета и на основании кода Lea такая функция будет выглядеть вот так: 

function getRGBByCSSColor(color) {
    var ctx = document.createElement("canvas").getContext("2d");
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, 1, 1);
    return [].slice.apply(ctx.getImageData(0, 0, 1, 1).data);
}

Вот так, всего 4 строчки кода с помощью HTML5 Canvas и встроенной возможности обрабатывать цвета в формате CSS.