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>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
