Question

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

我现在的问题是，当我加载我的数据（使用AJAX）并尝试抓取颜色时，图像未加载jet并且我得到“未捕获的DOMException：无法在'CanvasRenderingContext2D'上执行'getImageData' ：源宽度为0.“

所以这是我到目前为止所尝试的：

METHODE 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]));
}

METHODE 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]));
}

方法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();

METHODE 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];
}

所以我告诉你的是，到目前为止还没有真正奏效的。我还试图设置我的域的绝对路径。

唯一有效的方法是尝试捕获，重复整个for循环，这不是那么好。

所以大家，如果你对如何解决这个问题有一些想法/意见，或者也可以选择彩色（非常重），那就太棒了。

提到，我已经尝试将彩色小偷与这些小偷结合起来：

ImagesLoaded - Very bugy in Google Chrome
Colorify - Didn't manage to change the script to what i need
[Dominant-Color - 有imagemagick dependdencie，我想避免]
[自适应背景 - 与Colorify相同]
[PrimaryColor - 我必须再试一次，认为我的代码中有错误]

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

到目前为止，谢谢马丁

动态色彩小偷/获得主导色彩

0 个答案: