Menu
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!
208
The Color Thief package includes multiple distribution files to support different environments and build processes. Here is the list of all the files in the /dist folder and what formats they support: color-thief. js - CommonJS module for use in Node.
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>
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
