logo El diario de Pepe Molina (Caricatos)

yo

Durante la escritura de los apuntes, hay veces que he necesitado obtener un determinado color de una imagen y para esos casos lo que creo que es de uso más habitual es el "cuentagotas" de los editores gráficos.


Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

Sólo se aguanta una civilización si muchos aportan su colaboración al esfuerzo

José Ortega y Gasset, filósofo y ensayista español (1883-1955).


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

Paleta de colores desde imagen

emoticón de Caricatos Publicado el día 23 de agosto de 2011
id=37; categorías: Vicisitudes de un Webmaster, Programación

Colores Durante la escritura de los apuntes, hay veces que he necesitado obtener un determinado color de una imagen y para esos casos lo que creo que es de uso más habitual es el "cuentagotas" de los editores gráficos. Vamos a plantear la posibilidad de obtener esa paleta desde un sencillo formulario de una página web (ésta, por ejemplo).

Vamos a intentar evitar un mal uso del recurso que proponemos limitando el tamaño de la imagen, y también limitaremos el número de colores, ya que una imagen muy pequeña de 100 x 100 puntos, puede tener una paleta de 10000 colores distintos (cada punto de un color diferente).

Una medida adecuada a todo *

Debemos pensar en una limitación en el tamaño de la imagen para no necesitar configuraciones especiales, y debido a la velocidad normal actual de transferencia de datos en Internet, en principio limitaremos el tamaño a 800 puntos en el mayor de los lados de la imagen; pero en el servidor la redimensionaremos a 200 puntos.

Necesitamos entonces un formulario normal con las condiciones obligatorias para adjuntar ficheros, y al no ser posible con Ajax (el objeto XMLHttpRequest) tendremos que tener un iframe oculto (o no). También necesitaremos una función que reciba el listado de colores y los muestre, pero cuando no se encuentre en la página (solo debe existir para el presente apunte), nos indique el número de colores obtenidos. O sea, debemos hacer uso de nuestro comodín.

Capturando paleta de imagen

Junto a estas líneas mostramos el estado de transacción (subida de la imagen) y el número de colores obtenidos (será uno, el negro, en transacciones fallidas).

A la derecha mostraremos la paleta de la imagen, que como sabemos tendrá un máximo de 256 colores (0..255), y en principio estará comprendida por todas las tonalidades grises posibles. Cuando seleccionemos un color de la paleta, veremos cuál es en el recuadro adjunto y a la vez lo veremos de fondo. Si el color es muy oscuro y no se puede distinguir, siempre podremos usar "el viejo truco" de seleccionar el contenido; aunque esos detalles los dejaremos a gusto de consumidor.

Para inicializar la paleta nos hemos ayudado de nuestro "Probador de scripts" (se encuentra en la sección "Otras páginas del dominio") con el siguiente código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>
				http://www.caricatos.net/probador
		</title>
		<script type="text/javascript">
			txt = new Array();
			function tag(id) {return document.getElementById(id);}
			function gris(n) {
				r = n.toString(16).toUpperCase();
				rr = (r.length == 1) ? "0" + r:r;
				return rr + rr + rr;
			}
			window.onload = function()	{
				for (i = 0; i < 256; i++)
					txt.push("\t\t\t<div id="color_" + i + "" style="background-color: #" + gris(i) + "" title="" + gris(i) + ""></div>");
				tag("codes").innerHTML = txt.join("\n");
			}
		</script>
	</head>
	<body>
		<textarea id="codes" style="width: 100%; height: 600px"></textarea>
	</body>
</html>

Hemos comprobado que todo funciona correctamente, y podríamos incluir más controles como para poner el fondo seleccionado en distintas partes de la página, pero sobrecargaríamos de contenido el apunte innecesariamente, así que simplemente terminaremos aquí el mismo.

La recepción

Aunque todos los extras de este diario pueden verse en el editor del mismo, lo insertaremos a continuación.

function dec_hex($color)	{
	$c = dechex($color);
	if (strlen($c) == 1)	$c = "0$c";
	return strtoupper($c);
}
$tipo = $_FILES["paletera"]["type"];
$vale = substr($tipo, 0, 6) == "image/";
if ($vale)	{
	$paletera = $_FILES["paletera"]["tmp_name"];
	list($ancho, $alto) = @getimagesize($paletera);
	if ($ancho > 800 || $alto > 800)	{
		$error = 1;
		$colores = array("000000");
	}
	else	{
		$apaisada = $ancho > $alto;
		$anchito = ($apaisada) ? 200: (int) (200 / $alto * $ancho);
		$altito = ($apaisada) ? (int) (200 / $ancho * $alto): 200;
		$peque = imagecreatetruecolor($anchito, $altito);
		$paletera = imagecreatefromstring(file_get_contents($paletera));
		ob_start();
			imagegif($paletera);
		$paletita = ob_get_clean();
		$paletita = imagecreatefromstring($paletita);
		imagecopyresampled($peque, $paletita, 0, 0, 0, 0, $anchito, $altito, $ancho, $alto);
		$colores = array();
		for ($i = 0; $i < $anchito; $i++)
			for ($j = 0; $j < $altito; $j++)	{
				$c = imagecolorsforindex($paletita, imagecolorat($paletita, $i, $j));
				$cc = dec_hex($c["red"]).dec_hex($c["green"]).dec_hex($c["blue"]);
				if (!in_array($cc, $colores))	array_push($colores, $cc);
		}
		$error = 2;
	}
}
else	{
	$error = 0;
	$colores = array("000000");
}
$n = count($colores);
$mensaje_error = array("no es imagen", "tamaño inadecuado", "Ok");
$body = "Estado transacción: ".$mensaje_error[$error]."<br/>Colores encontrados: $n";
$js = "window.onload = function()\t{\n\tif (parent.mostrarPaleta)\tparent.mostrarPaleta(colores);\n\telse\talert(\"Colores: $n\n" + colores);\n}
\ncolores = [\"".implode("\",\n\"", $colores)."\"];\n";

Nótese que la inicialización javascript ($js) en la recepción contempla un caso "else" si no existiese la función "parent.mostrarPaleta", que teóricamente nunca se ejecutará, pero supongo que servirá como "caso de estudio" (bastaría con añadir un botón tipo submit para que fuese útil).

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.37) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 3342 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

http://www.pepemolina.com/clipart/fondos/BCKGRD44.svg
http://www.pepemolina.com/clipart/fondos/1673.svg
http://www.pepemolina.com/postales/aves/ocellot2.gif
enlace a la postal
Copyright © 2002-2018 www.pepemolina.com
RSS rss | Ver Mapa del sitio