Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

65
Vistas
Set Fonts Color from Average color of Body Background Image

Trying to set a CSS variable (font color of specific elements) using the average of the body background image.

Part 1 - getting the average color value of an image

Found this and looks like it does what I need: https://stackoverflow.com/a/28228205/19049081

However this calls in the img element with an ID. Even if I set an ID on the Body, it's not pulling in the actual background image url.

Part 2 - Inserting the value into the variable at the root level

It looks like it's right, but I can be sure. Used this code here: https://stackoverflow.com/a/37802204

Here my full code:

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;

}
});             

And the website: https://symbiosisearth.network

The end goal is the get elements using the variable --bb-primary-color (and other variables) to be the average of the background image because the image is randomly generated.

I don't understand JS completely, just self taught HTML & CSS - putting it together as I go.

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.