Получить цвет фона из значения цвета с линейным градиентом

как я могу получить значение color-code от значения linear gradient, используя jQuery. Предположим, если у меня есть значение linear gradient как

background:linear-gradient(to right, #fff 87%,rgba(238,237,233,0) 100%);

Как я могу извлечь цветовой код из этого. Я должен получить окончательный вывод как #fff в этом случае. Я попытался использовать

$('selector').css('background-color');

который не помогает мне получить цветовой код. Может кто-нибудь поможет мне понять это. Спасибо..:)

Ответ 1

Одним из возможных решений было бы создание элемента canvas с использованием класса 'selector' class id для его стилизации.

Тогда вы можете установить RGBA пикселя на этом холсте. ОЧЕНЬ "взломанный", но это единственное, о чем может думать мой маленький мозг!

Что-то вроде этого (Не тестировалось!):

Допустим, ваш html выглядит примерно так:

<style>
.background_element{
background:linear-gradient(to right, #fff 87%,rgba(238,237,233,0) 100%);
}
</style>

Затем вы хотите проверить цвет фона.. поэтому мы создаем объект canvas для клонирования div в это время.

var canvas = document.createElement('canvas');
//apply width and heigh 1px
canvas.css('background-color', $('.background_element').style.backgroundColor);

Тогда мы не можем получить цвет пикселя на этом холсте.

var pixelData = this.canvas.getContext('2d').getImageData(1, 1, 1, 1).data;
console.log('R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3]);

Это запустит RGBA на консоль.. Может быть..

- Примечание: я не рекомендую это для создания env, конечно, доказательство концепции!

Вдохновение

В качестве альтернативы

Вы можете быть очень причудливыми и действительно вливаться в RGBA с помощью HTMLelement.prototype.alpha!:)

Что-то вроде:

HTMLElement.prototype.alpha = function(a) {
        current_color = getComputedStyle(this).getPropertyValue("background-color");
        match = /rgba?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*\d+[\.\d+]*)*\)/g.exec(current_color)
        a = a > 1 ? (a / 100) : a;
        console.log("rgba(" + [match[1],match[2],match[3],a].join(',') +")");
      }

Снова очень грязно, но есть хорошие шансы, это будет более важно!

Ответ 2

Try

 $(function () {
     (function ($) {
         $.fn.rgb2hex = function (prop) {
             return $.map(
             $(this)
               .css(prop)
               .split(/([rgb|rgba|+[\(]+[\d]+[\,]+[ \d]+[\, \d]+[ \d]+[\)])/)
             , function (value, index) {
                 if (value.indexOf("rgb") != -1) {
                    var _rgba = function () {
                      return $.map(value.replace(/[rgba]|[rgb]|[\(|\)]/g, "")
                             .split(",").map(function (r) {
                             return parseInt(r, 10)
                         }), function (k, v) {
                             var h = k.toString(16);
                             var hex = h.length === 1 ? "0" + h : h;
                             var _hex = [];
                             _hex.push(hex);
                             return _hex;
                         });
                     };
                     return $.map([$.makeArray([], _rgba())]
                     , function (v, i) {
                         return (v.length === 4 
                                ? "#" + v.slice(0, 3).join("") 
                                : "#" + v.join("")
                                );
                     });
                 };
             });
         };
     })(jQuery);

     console.log($("div").css("background")
                 , $("div").rgb2hex("background")
                );

     $("div").html("css background: " 
                  + "<br /><br />" + $("div", this).css("background") 
                  + "<br /><br />" + "rgba to hex: " 
                  + "<br /><br />" + $("div", this).rgb2hex("background")
                  );
 })

jsfiddle http://jsfiddle.net/guest271314/9tgDt/