Color Thief won’t work …

前端未结

关注

 4  1934

南笙

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 do

相关标签:

4条回答

猫巷女王i

2020-12-18 05:10
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);
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
轮回少年

2020-12-18 05:10
I struggled for a few hours to get color-thief to work. In the end it was the tiny addition of [0] to point to the first array element:
```
<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];
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

一生所求

2020-12-18 05:22

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

0 讨论(0)

感动是毒

2020-12-18 05:32

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>

0 讨论(0)