change color of `li` of list to average image color

Question

I have a working getAverageColorOfImage function, It works for a single image using its #id, but in trhis case I want to make it work with different images in a list to make the background list parent, change of color....

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>

FUNCTION It work 100% well using an #id and html5

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+')');

I've tried this but nothing

Answer 1

Your issue is here: ImageGetColor=$('.c'); You are passing a JQuery object when you want the raw element in your getAverageRGB function i.e. $('.c')[0];

It always seems to return rgb(0,0,0); though.

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>