CODEWITHSUNDEEP
javascriptimagebackgroundrgb
Fyxerz
Fyxerz

Reputation: 169

Get background color from an image using color-thief

I am working on a script to grab the dominant color from an image using color-thief.js and then use that color as background-color. I have never used this plugin before so I don't know what I am exactly doing wrong. The background color is not applying though.

$(document).ready(function($) {
    $(".box img").load(function(){
        var dominantColor = getDominantColor($(this));
        $(this).parent().css("background-color", "rgb("+dominantColor+")");
    });        
});

Thanks in advcance.

Upvotes: 2

Views: 2586

Answers (1)

XaxD
XaxD

Reputation: 1538

You need to initiate the ColorThief object to reference its internal methods.

var colorThief = new ColorThief();
$(document).ready(function($) {
    $(".box img").load(function(){
         var dominantColor = colorThief.getColor($(this));
         console.log(dominantColor);
         $(this).parent().css("background-color", "rgb("+dominantColor+")");
    });
});

Upvotes: 2

Related Questions