CODEWITHSUNDEEP
jquery
Nibin
Nibin

Reputation: 3960

Get background colour from linear-gradient color value

how could i get the color-code from a linear gradient value using jQuery.Suppose if I have a linear gradient value as 

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

how could i extract the color code from this.I should be getting the final output as #fff in this case..I tried using 

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

which does not help me get the color-code.Could someone help me figure this out.Thanks.. :)

Upvotes: 10

Views: 3856

Answers (3)

phpier
phpier

Reputation: 55

Fast efficace methode:

<a class="give-it-class" style="display:none" ><?php echo /* your color here  */;?> </a>

& at your jquery:

$('.give-it-class').text();

it will give you the value

Upvotes: 0

guest271314
guest271314

Reputation: 1

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/

Upvotes: 0

Pogrindis
Pogrindis

Reputation: 8151

One possible solution would be to create a canvas element using the 'selector' class|id to style it.

Then you could establish the RGBA of a pixel on that canvas.. VERY 'hacky' but its the only thing my little brain can think of!

Something like this (Not tested!):

Lets say your html looks something like this : 

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

Then you want to check the background colour .. so we create a canvas object to clone the div at that time. 

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

Then we cant to get the colour of a pixel on this canvas.. 

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]);

This would log the RGBA to the console.. Maybe..

- Note: I dont recommend this for production env of course, meerly a proof of concept!

Inspiration

Alternatively

You could be very fancy and really strip into the RGBA with HTMLelement.prototype.alpha! :)

Something like : 

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(',') +")");
      }

Again very messy but there is a good chance this will be more percise !

Upvotes: 1

Related Questions