新手问题在这里: 我有一个代码,可以找到图像的平均 colored颜色 ,并将该 colored颜色 应用于sibling DIV的背景 colored颜色 .该代码只适用于页面的第一个图像,但我希望它循环遍历具有.project-thhumbnail类的页面的所有图像,并将 colored颜色 应用于它们各自的同级DIV.

我知道我可以执行jQuery的.each()函数,但我是新手,不知道如何在不使用jQuery的情况下实现所需的功能

const img = document.querySelector('.project-thumbnail');
const rect = img.nextElementSibling;
img.crossOrigin = "Anonymous";


img.onload = function () {
    getAverageColor(img)
}


function getAverageColor(img) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  let width = canvas.width || img.naturalWidth;
  let height = canvas.height || img.naturalHeight;
  let draw = ctx.drawImage(img, 0, 0);

  const imageData = ctx.getImageData(0, 0, width, height);
  const data = imageData.data;
  let r = 0;
  let g = 0;
  let b = 0;

  for (let i = 0, l = data.length; i < l; i += 4) {
    r += data[i];
    g += data[i+1];
    b += data[i+2];
  }
  
  r = Math.floor(r / (data.length / 4));
  g = Math.floor(g / (data.length / 4));
  b = Math.floor(b / (data.length / 4));
  console.log("R:",r,"G:",g,"B:",b)
  //return { r: r, g: g, b: b };
 rect.style.background = `rgb(${r},${g},${b})`;
}

getAverageColor(img)

推荐答案

将一个函数(即:setBgFromAverage)传递给NodeList.prototype.forEach(NodeList是document.querySelectorAll('.project-thumbnail')的结果 node )

也调整你的画布尺寸!

const getAverageColor = (img) => {

  const rect = img.nextElementSibling;
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  const width = canvas.width = img.naturalWidth;
  const height = canvas.height = img.naturalHeight;

  ctx.drawImage(img, 0, 0, width, height);
  
  const imageData = ctx.getImageData(0, 0, width, height);
  const data = imageData.data;
  let r = 0;
  let g = 0;
  let b = 0;

  for (let i = 0, l = data.length; i < l; i += 4) {
    r += data[i];
    g += data[i + 1];
    b += data[i + 2];
  }

  r = Math.floor(r / (data.length / 4));
  g = Math.floor(g / (data.length / 4));
  b = Math.floor(b / (data.length / 4));

  rect.style.backgroundColor = `rgb(${r},${g},${b})`;
};

const setBgFromAverage = (img) => {
  img.crossOrigin = "Anonymous";
  img.addEventListener("load", () => getAverageColor(img));
};

document.querySelectorAll('.project-thumbnail').forEach(setBgFromAverage);
.projects {
  display: flex;
}

.project-thumbnail {
  height: 100px;
}

.project-thumbnail+* {
  color: #fff;
  padding: 1rem;
}
<div class="projects">

  <img class="project-thumbnail" alt="thumb 1" src="https://graph.facebook.com/10217909169392394/picture?type=large">
  <div>Samuel Charpentier</div>
  
  <img class="project-thumbnail" alt="thumb 2" src="https://i.imgur.com/shlgPmb.jpeg">
  <div>Catty cat</div>
  
</div>


有关检索average color of an image的改进代码,请参阅以下答案:Get average color of image via Javascript

Javascript相关问答推荐

通过JavaScript将CSS与音频大声噪音同步

在Phaser中查找哪个物体处于碰撞中

如何在react + react路由域名中使用DeliverBrowserRouter?

创建1:1比例元素,以另一个元素为中心

布局样式在刷新时不持续

Google图表时间轴—更改hAxis文本 colored颜色

如何在Connect 4游戏中 for each 玩家使用位板寻找7形状?

使用i18next在React中不重新加载翻译动态数据的问题

Angular:动画不启动

WebRTC关闭navigator. getUserMedia正确

如何为我的astro页面中的相同组件自动创建不同的内容?

如何控制Reaction路由加载器中的错误状态?

如何在Svelte中从一个codec函数中调用error()?

在数组中查找重叠对象并仅返回那些重叠对象

在css中放置所需 colored颜色 以填充图像的透明区域

创建以键值对为有效负载的Redux Reducer时,基于键的类型检测

OnClick更改Json数组JSX中的图像源

在查看网页时,如何使HTML中的按钮工作方式类似于鼠标上的滚轮或箭头键?

处理app.param()中的多个参数

是否可以在不更改组件标识的情况下换出Reaction组件定义(以维护状态/引用等)?如果是这样的话,是如何做到的呢?