彩色小偷不会工作...... [英] Color Thief won’t work …
问题描述
我想使用 Color Thief ，这个脚本可以让你提取显性图像的颜色。
I’d like to use Color Thief, a script which allows you to extract the dominant color of an image.
不幸的是我无法让代码工作。我希望主导颜色是div的背景颜色，叫做 mydiv 。
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.
这就是我所拥有的到目前为止： http://jsfiddle.net/srd5y/4/
Here’s what I have so far: http://jsfiddle.net/srd5y/4/
由于交叉链接问题，更新了代码/转移到我自己的服务器： http://moargh.de/daten/color-thief-master/test.html
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>
感谢您的帮助！
推荐答案
根据您的代码和每个人的答案混合尝试。在使用Color Theif之前，您需要等待图像加载。 photo1.jpg的颜色应为[125,190,193]
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]
谢谢@Shadow向导和@ejegg
Thanks @Shadow Wizard and @ejegg
请参阅官方在执行某事之前要求jQuery等待加载所有图像的方法
编辑：好用这个小提琴起作用 http://jsfiddle.net/bgYkT/
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>
这篇关于彩色小偷不会工作......的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
