Mude a cor de fundo com uma imagem dominante da imagem

Estou procurando uma maneira inteligente de mudar a cor de fundo para uma página, mas levando o valor #xxxxxx da cor dominante da imagem principal.

Em vinte e onze temas, eu posso definir uma imagem aleatória para cada página carregada, eu mudaria a cor de fundo para coincidir com a imagem.

Eu sei que é possível, mas não sei como modificar o CSS ou o modelo para tirar o valor de uma function específica (encontrei isso que parece promissor:

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

Isso é muito complicado?

Muito obrigado

Solutions Collecting From Web of "Mude a cor de fundo com uma imagem dominante da imagem"

Você pode usar um plugin jQuery chamado Ladrão de colors .

Arquivos necessários:

  1. jquery.js (está incluído no WordPress)
  2. quantize.js (download da página de color-thief github )
  3. color-thief.js (download da página de color-thief github )

Configuração do WordPress:

Abra functions.php (localizado na pasta do seu tema) e adicione o código abaixo para carregar os arquivos no WordPress. Neste caso, coloquei todos os arquivos na pasta “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'); 

Como você pode ver, eu também criei um arquivo main.js para armazenar o código que executará o código de ladrão de colors.

Código main.js:

 jQuery(document).ready(function($) { $("#target").load(function(){ // Dominant Color var dominantColor = getDominantColor($(this)); //change background $("body").css("background-color", "rgb("+dominantColor+")"); }); }); 

O código acima procurará uma imagem com id = target .
A function load() assegurará que a imagem já tenha sido carregada antes que o código seja executado.

Em seguida, o valor da cor dominante é armazenado em uma variável (o valor retornado é 3 números, que formam a cor RGB)

Usamos essa mesma variável para mudar a cor do plano de fundo.

A configuração de HTML:

O tema TwentyEleven carrega a imagem através de uma function no arquivo header.php , mas você ainda pode editar a tag de imagem e adicionar uma ID de imagem para poder encontrá-la facilmente com jQuery.

Nesse caso, minha ID de imagem é target :

  

E isso deveria bastar. Uma vez que a página seja carregada, o script jQuery procurará uma imagem com id = target . Obtenha a cor dominante dessa imagem e, em seguida, aplique-a no plano de fundo da página automaticamente.

Você pode ver uma demonstração deste trabalho aqui . (atualize a página algumas vezes até carregar uma imagem diferente)