Dominant Color js scripts

Ionic Framework ionic-v3
1

Hi,
Trying to get a dominant/average color of a profile image and use it as the background of the page.

Have tried Colorify.js, node-vibrant.js, Dominant-color.js and a few more…firstly, are there any tried and tested libraries that work (with some sample code if possible) ?

Else, below is the snippet of my implementation of node-vibrant.js (node-vibrant) which is throwing an error
var vibrant = new Vibrant(JSON.stringify(this.user.attachments.profileImage));
var swatches = vibrant.getPalette();
for(var swatch in swatches) {
if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
console.log("Swatches: " + swatch);
}
}

The error/output i get is various depending on my limited coding skills…sometimes the swatches[swatch] is {}, sometimes swatches is printing just the text raw, and sometimes I’m getting a cyclic code error.

2

Was able to make progress with node-vibrant…almost there but having some weird error…

When I use the below code

setBackground() {
    console.log('ProfilePage :: setBackground : Background for image');
    var img = new Image();
    img.src = this.user.attachments.profileImage;
    var vibrant = new Vibrant(img);
    vibrant.getSwatches(function(err, palette) {
      for(var swatch in palette) {
        if (palette.hasOwnProperty(swatch) && palette[swatch]) {
          console.log(swatch.toString(), palette[swatch].getHex());
          if(swatch.toString() === 'DarkVibrant'){
            console.log("Reached inside");
          }
        }
      }
    });
}

I get the output

image
Screen Shot 2016-11-30 at 1.15.54 AM.png738×306 27.3 KB

And that is perfectly what I needed to update my ion-content style.backgroundColor with the ‘DarkVibrant’ swatch…but the moment I update my code to assign the backgroundColor variable, with the below…

  if(swatch.toString() === 'DarkVibrant'){
    console.log("Reached inside");
    this.profileContent.style.backgroundColor = palette[swatch].getHex();
    // OR
    this.backgroundColor = palette[swatch].getHex(); //default color of backgroundColor is updating the html
    console.log(this.backgroundColor);
  }

I start getting an output
image
The code refuses any sort of assignment of the hex to local variables or ElementRef etc…

Any ideas ?

3

Still haven’t found a solution to this problem…anyone EVER get a angular2/ionic2 library working for this requirement ?

4

Can you please post your .ts and .html page?

5

Here’s what I did:
In my .ts file

var backcolor;
Vibrant.from("../../assets/imgs/header.png")
      .getPalette()
      .then(palette => {
        backcolor = palette.DarkMuted.getHex();
        // this.backcolor = palette.DarkVibrant.getHex();
        // this.backcolor = palette.LightMuted.getHex();
        // this.backcolor = palette.LightVibrant.getHex();
        // this.backcolor = palette.Muted.getHex();
        // this.backcolor = palette.Vibrant.getHex();
      });

in my .html page
<div [ngStyle]="{'background-color': backcolor}"></div>