pregunta de novato aquí: tengo un código que encuentra el color promedio de una imagen y aplica ese color al color de fondo de un DIV hermano. El código funciona solo para la primera imagen de la página, pero quiero que recorra todas las imágenes de la página que tiene la clase .project-thumbnail y aplique el color a su respectivo DIV hermano.

Sé que podría hacer una función .each() de jQuery, pero soy nuevo en JavaScript y no puedo entender cómo lograr lo deseado, sin usar 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)