6

I’d like to use Color Thief, a script which allows you to extract the dominant color of an image.

Unfortunately I’m not able to get the code to work. I’d like the dominant color to be the background color of a div called mydiv.

Here’s what I have so far: http://jsfiddle.net/srd5y/4/

Updated code / transfered to my own server due to cross-linking issues: http://moargh.de/daten/color-thief-master/test.html

JS

var sourceImage = 'https://www.google.de/intl/de_ALL/images/logos/images_logo_lg.gif';
var colorThief = new ColorThief();
colorThief.getColor(sourceImage);

HTML

<div id="mydiv"></div>

Thanks for any help!

5
  • in the jsfiddle, color-thief.js contains HTML markup instead of javascript. Check the error console.
    – akonsu
    Commented Sep 3, 2013 at 20:15
  • sorry for that—it’s fixed. Commented Sep 3, 2013 at 20:19
  • 2
    For your fiddle example I don't think Color Thief can cross-domain Commented Sep 3, 2013 at 20:25
  • @Murtnowski: What do you mean exactly? Commented Sep 3, 2013 at 20:30
  • Updated Code-> Are you allowing time for the image to load before using Color Thief? Try $(window).ready(handlerFunction). The color for the updated code image should be [125, 190, 193] Commented Sep 3, 2013 at 20:43

4 Answers 4

10

Try this based on your code and a mix of everyone's answers. You need to wait for the image to load before using Color Theif. The color for photo1.jpg should be [125, 190, 193]

Thanks @Shadow Wizard and @ejegg

See Official way to ask jQuery wait for all images to load before executing something

EDIT: Ok use this fiddle which works http://jsfiddle.net/bgYkT/

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/color-thief.js"></script>


    <style type="text/css">
        #mydiv {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>

</head>


<body>

    <img src="img/photo1.jpg" id="myimg" />

    <div id="mydiv"></div>


    <script>
      $(window).ready(function(){
        var sourceImage = document.getElementById("myimg");
        var colorThief = new ColorThief();
        var color = colorThief.getColor(sourceImage);
        document.getElementById("mydiv").style.backgroundColor = "rgb(" + color + ")";
       });
    </script>

</body>

2
8

Murtnowski is correct in saying that the operation will fail if you run it against an image hosted on a different domain. If you are running it on an image hosted on your own domain, you just need to call getColor with an img element rather than a URL:

HTML

<img src="/images/foo.jpg" id="myImg" />

JS

var sourceImage = document.getElementById("myImg");
var colorThief = new ColorThief();
colorThief.getColor(sourceImage);
3
  • Thanks, I build in your suggestions and uploaded it to my own server due to the cross-linking issue: moargh.de/daten/color-thief-master/test.html How do I get the value of the colorThief variable? Commented Sep 3, 2013 at 20:42
  • 2
    @user1706680 you need to manually set it e.g. var color = colorThief.getColor(sourceImage); document.getElementById("mydiv").style.backgroundColor = "rgb(" + color + ")"; Commented Sep 3, 2013 at 20:42
  • Thank you, I updated the code but it still doesn’t work … I also added the event handler Murtnowski suggested. Commented Sep 3, 2013 at 20:55
6

I struggled for a few hours to get color-thief to work. In the end it was the tiny addition of [0] to point to the first array element:

<img id="theimage" src="images/p1-340-thumb.jpg" />

myImage = $('#theimage');
colorThief = new ColorThief();
color = colorThief.getColor(myImage[0]);
red = color[0];
green = color[1];
blue = color[2];
1
  • Good catch. jQuery wrapped sets are not their underlying DOM elements, and many libraries require you to pass a DOM element. This has bitten me several times. :) stackoverflow.com/questions/1677880/…
    – Palpatim
    Commented Oct 7, 2013 at 21:57
3

I've had the same problem, and solved it this way :

// get my image url
var imageUrl = '//myimage.ulr.com';
// than create an image elm, the sizes are needed. 360x360 on this case
var image = new Image(360, 360);


image.onload = function(){
    // act only after image load
    console.log(image);

    // than colorThief and get the color value 
    var colorThief = new ColorThief();          
    var color = colorThief.getColor(image);
    console.log(color);
};
image.src = imageUrl;

Hope it helps anyone

1
  • I cannot get this to work... I'm ultimately trying to pull in the background image of an element, but even simplifying it down to your example, with the url explicitly defined... I still get nothing. Any ideas why? codepen.io/chasebank/pen/xEAAWE
    – Chase
    Commented Sep 28, 2016 at 21:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.