javascript 颜色窃贼不会工作......
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18600644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Color Thief won’t work …
提问by user1706680
I'd like to use Color Thief, a script which allows you to extract the dominant color of an image.
我想使用Color Thief，这是一个允许您提取图像主色的脚本。
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.
不幸的是，我无法使代码正常工作。我希望主色是名为 .div 的 div 的背景色mydiv。
Here's what I have so far: http://jsfiddle.net/srd5y/4/
这是我到目前为止所拥有的：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
由于交叉链接问题更新代码/转移到我自己的服务器：http: //moargh.de/daten/color-thief-master/test.html
JS
JS
var sourceImage = 'https://www.google.de/intl/de_ALL/images/logos/images_logo_lg.gif';
var colorThief = new ColorThief();
colorThief.getColor(sourceImage);
HTML
HTML
<div id="mydiv"></div>
Thanks for any help!
谢谢你的帮助！
回答by ejegg
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:
Murtnowski 正确地说，如果您针对托管在不同域上的图像运行该操作将失败。如果您在自己的域中托管的图像上运行它，则只需使用 img 元素而不是 URL 调用 getColor ：
HTML
HTML
<img src="/images/foo.jpg" id="myImg" />
JS
JS
var sourceImage = document.getElementById("myImg");
var colorThief = new ColorThief();
colorThief.getColor(sourceImage);
回答by Murtnowski
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]
根据您的代码和每个人的答案进行尝试。在使用 Color Theif 之前，您需要等待图像加载。photo1.jpg 的颜色应该是 [125, 190, 193]
Thanks @Shadow Wizard and @ejegg
感谢@Shadow Wizard 和@ejegg
See Official way to ask jQuery wait for all images to load before executing something
请参阅在执行某些操作之前要求 jQuery 等待所有图像加载的官方方法
EDIT: Ok use this fiddle which works http://jsfiddle.net/bgYkT/
编辑：好的，使用这个有效的小提琴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>
回答by bmerigan
I struggled for a few hours to get color-thiefto work.
In the end it was the tiny addition of [0]to point to the first array element:
我挣扎了几个小时才color-thief去上班。最后是[0]指向第一个数组元素的微小添加：
<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];
回答by diegofelipece
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
希望它可以帮助任何人
