Color-thief.js无法读取undefined的属性'width'

时间:2017-06-26 13:25:13

标签: javascript html color-thief

我正在努力使彩色小偷工作,我认为我的代码是正确的,我不明白它是来自彩色小偷脚本还是我的。

到目前为止,这是我的代码:

<!doctype html>
<html lang="fr">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


    src=" <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>"></script>
    <script src="color-thief.js"></script>

    <style type="text/css">
        #mydiv {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>

</head>


<body>

    <div id="mydiv"></div>
    <img src="image/image_test.png" id="myImg" />


<script>
    $(document).ready(function() {
        var sourceImage = document.getElementById("myImg");
        var colorThief = new ColorThief();
        color = colorThief.getColor(sourceImage[0]);
        alert(color);
    // document.getElementById("mydiv").style.backgroundColor = "rgb(" + color + ")"; 
    });
</script>

</body>
</html>

我想提醒RGB的颜色,在我的控制台中,我有这个错误:

> Uncaught TypeError: Cannot read property 'width' of undefined
>     at new CanvasImage (color-thief.js:33)
>     at ColorThief.getPalette (color-thief.js:109)
>     at ColorThief.getColor (color-thief.js:76)
>     at index.html:32

由于

1 个答案:

答案 0 :(得分:0)

使用错误的参数调用getColor或GetPallete时,会发生此错误。

我认为您的错误是由 color = colorThief.getColor(sourceImage[0]); 尝试 color = colorThief.getColor(sourceImage);

但是我建议您尝试在img的Load事件上调用colorThief。