将列表的“ li”颜色更改为平均图像颜色

Question

我有一个正常工作的getAverageColorOfImage函数，它使用#id来处理单个图像，但在这种情况下，我想使其与列表中的其他图像一起使用，以使背景列表成为父级，改变颜色。

HTML

<ul>
<li><img src=a.jpg class="a b"></li>
<li><img src=a.jpg class="a c"></li>
<li><img src=a.jpg class="a d"></li>
<li><img src=a.jpg class="a e"></li>
<li><img src=a.jpg class="a f"></li>
<li><img src=a.jpg class="a g"></li>
<li><img src=a.jpg class="a h"></li>
</ul>

功能使用#id和html5可以100％正常工作

function getAverageRGB(imgEl) {

var blockSize = 5, // only visit every 5 pixels
    defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs
    canvas = document.createElement('canvas'),
    context = canvas.getContext && canvas.getContext('2d'),
    data, width, height,
    i = -4,
    length,
    rgb = {r:0,g:0,b:0},
    count = 0;

if (!context) {
    return defaultRGB;
}

height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;

context.drawImage(imgEl, 0, 0);

try {
    data = context.getImageData(0, 0, width, height);
} catch(e) {
    /* security error, img on diff domain */
    return defaultRGB;
}

length = data.data.length;

while ( (i += blockSize * 4) < length ) {
    ++count;
    rgb.r += data.data[i];
    rgb.g += data.data[i+1];
    rgb.b += data.data[i+2];
}

// ~~ used to floor values
rgb.r = ~~(rgb.r/count);
rgb.g = ~~(rgb.g/count);
rgb.b = ~~(rgb.b/count);

return rgb;

}

JQUERY / JAVASCRIPT

var ImageGetColor=$('.c');

var rgb = getAverageRGB(ImageGetColor);
  $(".a").closest("li").css("background",'rgb('+rgb.r+','+rgb.g+','+rgb.b+')');

我已经尝试过了但是没有

Answer 1

您的问题在这里： ImageGetColor=$('.c'); 当您想要getAverageRGB函数中的原始元素$('.c')[0]即$('.c')[0]时，您正在传递一个JQuery对象。

它似乎总是返回rgb(0,0,0); 虽然。

 function getAverageRGB(imgEl) { var blockSize = 5, // only visit every 5 pixels defaultRGB = { r: 0, g: 0, b: 0 }, // for non-supporting envs canvas = document.createElement('canvas'), context = canvas.getContext && canvas.getContext('2d'), data, width, height, i = -4, length, rgb = { r: 0, g: 0, b: 0 }, count = 0; if (!context) { return defaultRGB; } height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height; width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width; context.drawImage(imgEl, 0, 0); try { data = context.getImageData(0, 0, width, height); } catch (e) { /* security error, img on diff domain */ return defaultRGB; } length = data.data.length; while ((i += blockSize * 4) < length) { ++count; rgb.r += data.data[i]; rgb.g += data.data[i + 1]; rgb.b += data.data[i + 2]; } // ~~ used to floor values rgb.r = ~~(rgb.r / count); rgb.g = ~~(rgb.g / count); rgb.b = ~~(rgb.b / count); return rgb; } $("img").each(function(){ var rgb = getAverageRGB(this); $(this).parent().css("background", 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')'); }) 

 li{ list-style: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><img src="http://via.placeholder.com/100/fff0ff/000000" class="ab"></li> <li><img src="http://via.placeholder.com/100/f0ffff/000000" class="ac"></li> <li><img src="http://via.placeholder.com/100/ffff0f/000000" class="ad"></li> <li><img src="http://via.placeholder.com/100/ff0fff/000000" class="ae"></li> <li><img src="http://via.placeholder.com/100/fff00f/000000" class="af"></li> <li><img src="http://via.placeholder.com/100/f00fff/000000" class="ag"></li> <li><img src="http://via.placeholder.com/100/ff000f/000000" class="ah"></li> </ul>