Javascript 动态颜色盗贼/获取主色

我有一个非常特殊的问题与颜色小偷。我试图从数据表中加载一些数据，其中包含存储在同一域中的图像的实际路径。 有大约20个链接，我必须抓住主色，并将其推到一个数组中

我现在的问题是，当我加载数据（使用AJAX）并尝试获取颜色时，图像没有加载，我得到了一个“未捕获的DomeException:未能在“CanvasRenderingContext2D”上执行“getImageData”：源宽度为0

以下是我迄今为止所做的尝试：

方法1:GetColor

// Create Objects for colorThief
var colorThief = new ColorThief();
var myImage = new Image();
var colors = [];

for (var i = 0; i < result.length; i += 3) {
    labels.push(result[i]);                
    data.push(result[i + 1]);                      

    myImage.src = result[i + 2];
    var color = colorThief.getColor(myImage);
    colors.push("#" + rgbToHex(color[0]) + rgbToHex(color[1]) + rgbToHex(color[2]));
}

//为颜色小偷创建对象
var colorTheep=新的colorTheep（）；
var myImage=新图像（）；
var颜色=[]；
对于（变量i=0；i

方法2:GetColorByUrl

// Create Objects for colorThief
var colorThief = new ColorThief();
var colors = [];

for (var i = 0; i < result.length; i += 3) {
    labels.push(result[i]);                
    data.push(result[i + 1]);                      

    //Also tried with a absolute path, not changing anything
    var color = colorThief.getColorFromUrl(result[i + 2]);
    colors.push("#" + rgbToHex(color[0]) + rgbToHex(color[1]) + rgbToHex(color[2]));
}

//为颜色小偷创建对象
var colorTheep=新的colorTheep（）；
var颜色=[]；
对于（变量i=0；i

方法3：将图像附加到HTML

var colorThief = new ColorThief();
var colors = [];
var content = "<div id='temp' style='display:none'>";

//Create options
for (var i = 0; i < result.length; i += 3) {
    options += "<option value='" + result[i] + "'>" + result[i + 1] + "</option>";

    content += "<img src='" + result[i + 2] + "'>";
}

content += "</div>"

$("#contentRightTop").append(content);

var thisColor;
var theseColors = [];

$("#temp img").each(function () {
    thisColor = colorThief.getColor(this);
    theseColors.push(thisColor);
});

$("#temp").remove();

var colorTheep=new colorTheep（）；
var颜色=[]；
var-content=“”；
//创建选项
对于（变量i=0；i

方法4:Object.onload

// Create Objects for colorThief
var colorThief = new ColorThief();
var myImage = new Image;
var colors = [];

for (var i = 0; i < result.length; i += 3) {
    labels.push(result[i]);                
    data.push(result[i + 1]);                      

    myImage.onload = function() {
        var color  = colorThief.getColor(myImage);
        colors.push("#" + rgbToHex(color[0]) + rgbToHex(color[1]) + rgbToHex(color[2]));
    }
    myImage.src = result[i + 2];
}

//为颜色小偷创建对象
var colorTheep=新的colorTheep（）；
var myImage=新图像；
var颜色=[]；
对于（变量i=0；i

我是这么告诉你的，到目前为止，一切都不起作用。我还尝试设置到我的域的绝对路径

唯一有效的方法是尝试捕捉，重复整个for循环，有什么不好

所以伙计们，如果你们对如何解决这个问题有一些想法/意见，或者有颜色thied的替代品（它很重），那就太好了

提到，我allready曾试图用这个scipts组合/替换颜色小偷：

• [主色-与imagemagick相关，我希望避免]
• [自适应背景-与着色相同]
• [PrimaryColor-我必须再试一次，我认为我的代码中有错误]

（仅允许发布2个链接^^）

谢谢你

---

马丁

试试看：谢谢你的回复。我会试试看，让你知道试试看：谢谢你的回复。我试试看，然后告诉你