新手问题在这里: 我有一个代码,可以找到图像的平均 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)