javascript - 将列表中 `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 函数中的原始元素时，您正在传递 JQuery 对象，即 $('.c')[0];

它似乎总是返回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="a b"></li>
  <li><img src="http://via.placeholder.com/100/f0ffff/000000" class="a c"></li>
  <li><img src="http://via.placeholder.com/100/ffff0f/000000" class="a d"></li>
  <li><img src="http://via.placeholder.com/100/ff0fff/000000" class="a e"></li>
  <li><img src="http://via.placeholder.com/100/fff00f/000000" class="a f"></li>
  <li><img src="http://via.placeholder.com/100/f00fff/000000" class="a g"></li>
  <li><img src="http://via.placeholder.com/100/ff000f/000000" class="a h"></li>
</ul>