颜色小偷不会工作......答案

【问题标题】：Color Thief won’t work …颜色小偷不会工作......
【发布时间】：2013-09-03 20:09:38
【问题描述】：

我想使用Color Thief，这是一个脚本，可让您提取图像的主色。

很遗憾，我无法让代码正常工作。我希望主色是名为 mydiv 的 div 的背景色。

由于交叉链接问题已更新代码/转移到我自己的服务器：http://moargh.de/daten/color-thief-master/test.html

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>

感谢您的帮助！

【问题讨论】：

在 jsfiddle 中，color-thief.js 包含 HTML 标记而不是 javascript。检查错误控制台。
很抱歉，它已修复。
对于您的小提琴示例，我认为 Color Thief 不能跨域
@Murtnowski：你到底是什么意思？
更新代码-> 在使用 Color Thief 之前，您是否有时间加载图像？试试$(window).ready(handlerFunction)。更新后的代码图像的颜色应该是 [125, 190, 193]

标签： javascript

【解决方案1】：

根据您的代码和每个人的答案尝试这个。在使用 Color Theif 之前，您需要等待图像加载。 photo1.jpg 的颜色应该是 [125, 190, 193]

感谢@Shadow Wizard 和@ejegg

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

编辑：好的，使用这个有效的小提琴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>

【讨论】：

我添加了处理程序，但它仍然不起作用。 moargh.de/daten/color-thief-master/test.html
@user1706680 Missing end ) 在第 42 行

【解决方案2】：

Murtnowski 正确地说，如果您针对托管在不同域上的图像运行该操作，该操作将失败。如果您在自己的域中托管的图像上运行它，您只需要使用 img 元素而不是 URL 调用 getColor：

HTML

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

var sourceImage = document.getElementById("myImg");
var colorThief = new ColorThief();
colorThief.getColor(sourceImage);

【讨论】：

谢谢，由于交叉链接问题，我构建了您的建议并将其上传到我自己的服务器：moargh.de/daten/color-thief-master/test.html 如何获取colorThief 变量的值？
@user1706680 您需要手动设置它，例如var color = colorThief.getColor(sourceImage); document.getElementById("mydiv").style.backgroundColor = "rgb(" + color + ")";
谢谢，我更新了代码，但还是不行……我还添加了 Murtnowski 建议的事件处理程序。

【解决方案3】：

我挣扎了几个小时才让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];

【讨论】：

好收获。 jQuery 包装集不是它们的底层 DOM 元素，许多库要求您传递 DOM 元素。这已经咬了我好几次了。 :) stackoverflow.com/questions/1677880/…

【解决方案4】：

我也遇到了同样的问题，就是这样解决的：

// 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;

希望对大家有所帮助

【讨论】：

我无法让它工作......我最终试图拉入一个元素的背景图像，但甚至将其简化为您的示例，并明确定义了网址......我仍然一无所获。任何想法为什么？ codepen.io/chasebank/pen/xEAAWE