Question

我有一个有效的#id函数，它适用于使用<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>的单个图像，但在这种情况下，我想让它与列表中的不同图像一起使用，使背景列表为父，改变颜色......

HTML

#id

功能使用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; }和html5

可以100％正常工作

var ImageGetColor=$('.c');

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

JQUERY / JAVASCRIPT

{{1}}

我已经尝试了这个，但没有尝试

Answer 1

您的问题在于：ImageGetColor=$('.c');当您想要getAverageRGB函数中的原始元素，即$('.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="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>

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

1 个答案: