dominated color on multiple images using RGBaster.js

Question

I have this code there find the dominated color of an image (using RGBaster.js) then convert it to a flat color, and give the information box beside the image the color. At the same time, it makes the text color white or black after the YIQ scala.

function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(1,2),16);
    var g = parseInt(hexcolor.substr(3,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}



var img = $('.category').attr('data-background');
var colors = RGBaster.colors(img, {
    paletteSize: 5,
    success: function(colors){

        console.log("-----------------------------------------------");
        console.log("Dominant color:", colors.dominant);
        console.log("-----------------------------------------------");

        var rgb = colors.dominant;
        rgb = rgb.substring(4, rgb.length-1).replace(/ /g, '').split(',');

        var flatColors = FlatColors(rgb);
        var flatColor = flatColors[3];

        var textColor = getContrastYIQ(flatColor);
        console.log(textColor);

        $(".category").css('background-image', 'url(' + img + ')');
        $(".category .info").css('background-color', flatColor);
        $(".text").css('color', textColor);
        $(".text").text(flatColors[4]);
    }
});

Here comes the problem

---

I have multiple divs named like follow:

<div class="category" data-background="images/7.jpg">
    <div class="info">
        <p class="text">Hello World</p>
    </div>
</div>

And the code are need to find the dominated color for each category div and paint the info div with it.

I have tried to do this:

function colorPick(img) {
    RGBaster.colors(img, {
    paletteSize: 5,
        success: function(colors){

            var rgb = colors.secondary;
            rgb = rgb.substring(4, rgb.length-1).replace(/ /g, '').split(',');

            var flatColors = FlatColors(rgb);
            console.log("Return:", flatColors[3]);

            return flatColors[3];                       
        }
    });
}



$('.category').each(function(){
    var img = $(this).attr('data-background');

    $(this).css('background-image', 'url(' + img + ')');

    var color = colorPick(img);
    console.log(color);
});

But that didn't work. so now I need some help.

Answer 1

You need to use a promise.

You have a callback action - something that fires later than the rest of your code:

function colorPick(img) {
    RGBaster.colors(img, {
    paletteSize: 5,
        success: function(colors){ 

            var rgb = colors.secondary;
            rgb = rgb.substring(4, rgb.length-1).replace(/ /g, '').split(',');

            var flatColors = FlatColors(rgb);
            console.log("Return:", flatColors[3]);

            return flatColors[3]; // returns the parent function, success                       
        }
    });

    // colorPick itself doesn't return at all, which is why you get undefined
}

You need to return a Promise - an object that holds the asynchronous action and resolves when it completes:

function colorPick(img) {
    // Now colorPick returns the promise
    return new Promise(function(resolve, reject) {
        RGBaster.colors(img, {
            paletteSize: 5,
            success: function(colors){ 

                var rgb = colors.secondary;
                rgb = rgb.substring(4, rgb.length-1).replace(/ /g, '').split(',');

                // Check this shouldn't be "new FlatColors", as CapitalCase usually means it needs "new"
                var flatColors = FlatColors(rgb);
                console.log("Return:", flatColors[3]);

                // Resolve the promise
                // I've passed it the FlatColors object so the callback can access all of it
                resolve(flatColors); 
            }
        });
    });
}

Then, to access this you either use .then:

$('.category').each(function(){
    var $this = $(this); // avoid calling multiple times
    var img = $this.attr('data-background');

    $this.css('background-image', 'url(' + img + ')');

    // .then fires the function when the promise completes.
    colorPick(img).then(function(colors) {
        var flatColor = colors[3];

        // Set the background colour
        $this.find('.info').css('background-color', flatColor);

        var textColor = getContrastYIQ(flatColor);
        var $text = $this.find('.text');

        $text.css('color', textColor);
        $text.text(colors[4]);

        return colors; 
    }).then(console.log); // You can chain promises
});

Or you use async/await syntax:

$('.category').each(async function(){
    const $this = $(this); // avoid calling multiple times
    const img = $this.attr('data-background');

    // If we can use async/await we can also use const and iterpolated strings
    $this.css('background-image', `url(${img})`);

    // await continues this function after the promise completes
    const color = await colorPick(img);
    const flatColor = colors[3];

    // Set the background colour
    $this.find('.info').css('background-color', flatColor);

    const textColor = getContrastYIQ(flatColor);
    const $text = $this.find('.text');

    $text.css('color', textColor);
    $text.text(colors[4]);

    console.log(colors);
});

I recommend await, but if you support older browsers you may need to transpile your JS as it's fairly new.

That method resolves one colour at a time, but you may want to compare the results of multiple colours. The way to do that is with Promise.all, which waits for a collection of promises to finish and then returns an array of their results:

// Get the dominant colours in all the images on one array
const colors = await Promise.all(
    images.map(i => colorPick(i)));

That maps all the images to an array of promises, all waiting for the colorPick function to finish, and then waits for all of them to finish.

Finally, your question has been marked as a duplicate of this one. The top answer for that question goes into much more extensive detail on using promises and async/await than I have here.