Intentando establecer una variable CSS (color de fuente de elementos específicos) usando el promedio de la imagen de fondo del cuerpo.
Parte 1: obtener el valor de color promedio de una imagen
Encontré esto y parece que hace lo que necesito: https://stackoverflow.com/a/28228205/19049081
Sin embargo, esto llama al elemento img con una ID. Incluso si configuro una ID en el cuerpo, no está extrayendo la URL de la imagen de fondo real.
Parte 2: insertar el valor en la variable en el nivel raíz
Parece que es correcto, pero puedo estar seguro. Usé este código aquí: https://stackoverflow.com/a/37802204
Aquí mi código completo:
jQuery( document ).ready( function(){ var rgb = getAverageRGB(document.getElementById('colors')); document.documentElement.style.setProperty('--bb-primary-color', 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')'); 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 */alert('x'); 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; } });
Y el sitio web: https://symbiosisearth.network
El objetivo final es obtener elementos usando la variable --bb-primary-color (y otras variables) para que sea el promedio de la imagen de fondo porque la imagen se genera aleatoriamente.
No entiendo JS por completo, solo HTML y CSS autodidactas, poniéndolo junto a medida que avanzo.