Acompañanos a realizar un pequeño ejemplo para obtener el color predominante de una imagen con el lenguaje de programacion PHP, visualizaremos el codigo fuente y el resultado final obtenido.
Ya hemos visto en este blog como redimensionar una imagen con php y el dia de hoy vamos a obtener el color predominante de una imagen, algo similar a Google Images.
Seguramente habrás utilizado más de una vez el servicio de Google Images en el cual Google pone a tu disposición millones de imagenes en Internet al realizar una busqueda.
Seguramente habrás notado que al momento de realizar una busqueda en un pequeño segundo se cargan los colores predominantes de cada imagen antes de por fin cargar nuestras imagenes, pues el dia de hoy realizaremos este efecto de obtener el color predominante de una imagen con PHP.
Lo que haremos el dia de hoy será algo muy similar al efecto logrado por Google.
Mediante PHP leeremos una o varias imagenes y obtendremos el color predominante de cada imagen para posteriormente plasmarlo debajo de cada imagen para poder visualizar que realmente obtuvo el color predominante de cada imagen.
Algo similar a esto:
Como puedes ver se visualiza antes que nada la imagen y debajo de esta el color predominante obtenido, se podria con lo aprendido aqui hacer algo ya mucho más similar al funcionamiento de Google Images.
El codigo fuente para obtener el color predominante de una imagen como dijimos esta en PHP y es el siguiente:
- <?php
- $ruta = «imagen1.jpg»;
- $i = imagecreatefromjpeg($ruta);
- $rTotal = 0;
- $vTotal = 0;
- $aTotal = 0;
- $total = 0;
- for ($x=0;$x<imagesx($i);$x++) {
- for ($y=0;$y<imagesy($i);$y++) {
- $rgb = imagecolorat($i,$x,$y);
- $r = ($rgb >> 16) & 0xFF;
- $v = ($rgb >> 8) & 0xFF;
- $a = $rgb & 0xFF;
- $rTotal += $r;
- $vTotal += $v;
- $aTotal += $a;
- $total++;
- }
- }
- $rPromedio = round($rTotal/$total);
- $vPromedio = round($vTotal/$total);
- $aPromedio = round($aTotal/$total);
- echo «<img src='».$ruta.«‘ width=’400’ />»;
- echo «<div style=’display:block;height:50px;width:400px;background-color:rgb(«.$rPromedio.«,».$vPromedio.«,».$aPromedio.«)’>»;
- ?>
Como puedes ver el codigo no es tan complicado y extenso como podrías imaginar.
Simplemente en la variable ruta establece el nombre y ruta (sino la tienes en el mismo directorio de nuestro archivo) de nuestra imagen a obtener su color predominante y listo!
La mayor parte del funcionamiento de este ejemplo esta dentro del ciclo for donde se obtiene pixel por pixel el color predominante para posteriormente hacer un color predominante en base a estos valores obtenidos.