web-dev-qa-db-fra.com

Changer la couleur de fond avec une dominante de la photo

Je cherche un moyen intelligent de changer la couleur d'arrière-plan d'une page, mais en prenant la valeur #xxxxxx de la couleur dominante de l'image du titre.

Dans le thème vingt onze, je peux définir une image aléatoire pour chaque page chargée, je changerais la couleur de fond pour correspondre à l'image.

Je sais que c'est possible mais je ne sais pas comment modifier le CSS ou le modèle pour prendre la valeur d'une fonction spécifique (j'ai trouvé cela qui semble prometteur:

https://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript

Est-ce trop compliqué?

merci beaucoup

custom-backgroundcolor-picker
4
Apteryx

Vous pouvez utiliser un plugin jQuery appelé Color Thief .

Fichiers nécessaires:

  1. jquery.js (est inclus dans WordPress)
  2. quantize.js (à télécharger depuis color-thief page github )
  3. color-thief.js (à télécharger depuis color-thief page github )

Configuration Wordpress:

Ouvrez functions.php (situé dans le dossier de votre thème) et ajoutez le code ci-dessous pour charger les fichiers dans WordPress. Dans ce cas, j'ai placé tous les fichiers dans le dossier "js".

//color thief demo

wp_register_script('quantize', $base . '/js/quantize.js');
wp_enqueue_script('quantize');

wp_register_script('colorThief', $base . '/js/color-thief.js');
wp_enqueue_script('colorThief');

wp_register_script('main', $base . '/js/main.js');
wp_enqueue_script('main');

Comme vous pouvez le constater, j'ai également créé un fichier main.js pour stocker le code qui exécutera le code du voleur de couleurs.

code main.js: 

jQuery(document).ready(function($) {

    $("#target").load(function(){

        // Dominant Color
        var dominantColor = getDominantColor($(this));

        //change background
        $("body").css("background-color", "rgb("+dominantColor+")");
    });        
});

Le code ci-dessus cherchera une image avec id = target.
La fonction load() s'assurera que l'image a déjà été chargée avant l'exécution du code.

Ensuite, la valeur de la couleur dominante est stockée dans une variable (la valeur renvoyée est 3 chiffres, qui forment la couleur RVB)

Nous utilisons cette même variable pour changer la couleur de l'arrière-plan.

La configuration HTML:

Le thème TwentyEleven charge l’image par l’intermédiaire d’une fonction du fichier header.php, mais vous pouvez toujours éditer le tag d’image et ajouter un identifiant d’image pour pouvoir le retrouver facilement avec jQuery.

Dans ce cas, mon identifiant d'image est target:

<img 
    src="<?php header_image(); ?>" 
    width="<?php echo HEADER_IMAGE_WIDTH; ?>" 
    height="<?php echo HEADER_IMAGE_HEIGHT; ?>" 
    alt="" 
    id="target" />

Et cela devrait le faire. Une fois la page chargée, le script jQuery recherchera une image avec id = target. Obtenez la couleur dominante de cette image, puis appliquez-la automatiquement à l'arrière-plan de la page.

Vous pouvez voir une démonstration de ce travail ici . (actualisez la page plusieurs fois jusqu'à ce qu'elle charge une image différente)

4
gdaniel