La verdad es que no se si cumplo uno de los requisitos para postear en esta sección. No tengo muy claro la utilidad de mi aporte si no que espero que seáis vosotros los que la encontréis.
Mi creación es una clase en php que lo que hace es coger una imagen .png con colores no indexados y reproducirla con balizas html <div>.
Básicamente he creado algunos métodos para leer el color de cada uno de los píxeles de la imagen de entrada y crear un <div> con ese color de fondo y la anchura y altura determinada en el metodo de "impresion".
Una de las "utilidades" que le encuentro es el hecho de mostrar una imagen aun y cuando el navegador del cliente no acepta las imágenes y si el css (alguno habrá supongo).
Como hay que hacer un montón de cálculos (y el código no esta optimizado ) no es conveniente usar imágenes muy grandes (máx. 50px x 50px para que sea fluido)
Aquí os dejo un enlace para ver la clase en acción y lo que sigue es la clase en sí misma y un ejemplo de utilización.
Código :
<?php /** * pixelDiv Class * Version 0.1 * * Con esta clase podemos convertir una imagen en formato PNG con colores no indexados * en una serie de balizas html <div>. * El resultado es un conjunto de <div> que forman la imagen original * *Copyright David Siles De Frutos <[email protected]> * * License: * * This package is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation; version 2 dated June, 1991. * * This package is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this package; if not, write to the Free Software * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA * */ class pixelDiv { /** * * @var image * @access private */ private $img = null; /** * * @var integer * @access public */ public $imgWidth = null; /** * * @var image * @access public */ public $imgHeight = null; /** * @access public * @param string $nombreImg */ public final function __construct($nombreimg = null) { $im = @imagecreatefrompng ($nombreimg); /* Intento de apertura */ if (!$im) { /* Comprobar si ha fallado */ $im = imagecreate (30, 30); /* Crear una imagen en blanco */ $bgc = imagecolorallocate ($im, 255,255, 255); imagefilledrectangle ($im, 0, 0, 30, 30, $bgc); } $this->img = $im; $this->imgHeight = imagesy($im); $this->imgWidth = imagesx($im); }//__construct public function printSprite($pixelWidth = 1, $id = null) { $sprite = '<div id="'. $id .'" style="width:'. $this->imgWidth * $pixelWidth .'px;height:'. $this->imgHeight * $pixelWidth .'px">'; $pixelCount = $this->imgWidth * $this->imgHeight; for ($i = 1 ; $i <= $pixelCount ; $i++) { $rgb = $this->getPixel($i); $r = $rgb[0]; $g = $rgb[1]; $b = $rgb[2]; $sprite .= '<div style="float:left;width:'. $pixelWidth .'px;height:'. $pixelWidth .'px;background:rgb('. $r .','. $g .','. $b .');"></div>'; } $sprite .= '</div>'; echo $sprite; }//printSprite private function getPixel ($index) { $x = $this->pixelX($index); $y = $this->pixelY($index); $rgb = ImageColorAt($this->img, $x, $y); return array (($rgb >> 16) & 0xFF, //RED ($rgb >> 8) & 0xFF, //GREEN $rgb & 0xFF );//BLUE }//getPixel private function pixelIndex($x, $y) { return $y * $this->imgWidth + $x +1; }//pixelIndex private function pixelX($index) { return ($index - 1) % $this->imgWidth; }//pixelX private function pixelY($index) { return intval(($index - 1) / $this->imgWidth); }//pixelY }//class pixelDiv ?>
Ejemplo de utilización:
Código :
<?php include ('./pixelDiv.class.php'); $sprite = new pixelDiv('./smile.png'); ?> <?='<?xml version="1.0" encoding="UTF-8"?>'?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>pixelDiv :: TEST</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/> <style> body { background:rgb(150,150,255); } #mySpriteBig { border:5px solid silver; } </style> </head> <body> <img src="smile.png" width="35" height="35" alt="image Smile" /> <?php $sprite->printSprite(10,'mySpriteBig'); ?> </body> </html>
Como ya he dicho antes, ahora os toca a vosotros encontrar alguna utilidad a "esto"