Pintar sobre una imagen

mauled · #1 (**permalink**) 30/01/2007, 12:37

Hola a todos:

Je es sencillo mi problema

Quisiera poder dibujar sobre una imagen, con la ayuda del mouse. Realizar como una especie de "paint", pero no se por donde empezar. Alguien tiene algun link con el que me pueda orientar.

Gracias.

Panino5001 · #2 (**permalink**) 30/01/2007, 13:27

Creo que te convendría usar Flash para eso:
http://www.tutoriales-flash.com/tutorial.asp?id_tuto=6

mauled · #3 (**permalink**) 30/01/2007, 16:40

No existe otra forma que no sea con flash, no existe algun objeto "imagen" que pueda ayudarme con esto?

Saludillos.

derkenuke · #4 (**permalink**) 30/01/2007, 17:21

En el foro hemos hablado alguna vez de una librería grafica para dibujar. hemos logrado hacer varias cositas interesantes.

Mi último post de este tipo es http://www.forosdelweb.com/f13/dibujar-optimamente-libreria-grafica-optima-454196/#post1843639, pero quizá es demasiado complicado para lo que deseas hacer, y sólo desees pintar líneas.

¿Qué tipo de dibujo quieres hacer?

mauled · #5 (**permalink**) 30/01/2007, 18:46

jeje gracias por responder!!

Pues el usuario,puede dibujar desde lineas hasta "al vuelo" es decir garabatos. Podrias recomendarme algun link para poderme orientar.

Gracias.

MikiBroki · #6 (**permalink**) 31/01/2007, 02:57

Posiblemente te sirva esta librería:

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

caricatos · #7 (**permalink**) 31/01/2007, 06:34

Hola:

Me gustó la idea, y preparé una paginilla... basada en una respuesta de hace bastante tiempo...

http://www.caricatos.net/efectos/pixelar.html

Para crear una imagen jpg sería algo más complejo, pero más tarde lo intentaré.

Saludos

derkenuke · #8 (**permalink**) 31/01/2007, 07:15

Sí, en concreto es este mensaje
http://www.forosdelweb.com/f13/dibujar-optimamente-177841/
sólo que el buscador de forosdelweb no encuentra los mensajes antiguos ya y sólo se puede buscar por el Panel de control o con google. Ya no te puedes fiar del buscador..

mauled · #9 (**permalink**) 31/01/2007, 09:17

Gusto lo que necesitaba caricatos, pero veo que haces referencia a dos .js:

rutaPixelar.js;Donde supongo que estas manejando los eventos del mouse y el evento de "pintar los pixeles"

colores.js;Donde supongo que tienes lo necesario para pintar la paleta.

De donde puedo descargar esos javascripts?

Muchas gracias por contestar.

Saludillos.

Panino5001 · #10 (**permalink**) 31/01/2007, 10:03

Yo también preparé algo, pero no sé si te servirá:
http://www.disegnocentell.com.ar/ayuda/api.php

caricatos · #11 (**permalink**) 31/01/2007, 10:10

Hola:

derkenuke: Esos trabajos, merecen "un marquito" (con su paspartú) ya que son verdaderas obras de arte (¡A que sí!)... pero aquel mensaje antiguo al que refería era otro, en donde presentaba esta página: pixelator y era una respuesta a un tema donde se mostraba un dibujo hecho basado en capas (muy bueno por cierto).
La cuestión es que el dibujo que se muestra está hecho sin un tag img sino con unas capas vacías y con estilos de posicionamiento y color de fondo crear el efecto de una imagen...

mauled: Es cierto que colores.js se trata a un script que crea la paleta de colores... está en fase "beta" pero si lo quieres se encuentra en este sitio: colores.js, y la página de ejemplo (inconclusa) es : Colores... no te preocupes si no hay info suficiente que si la necesitas yo mismo te la daré (incluso hay gente muy cualificada en estos foros que sin duda pueden ayudar)...
El otro script no existe... tan solo copié la vieja página (la que comentaba a derkenuke) y no me fijé que se colaba ese enlace, pero es intrascendente.

La cuestión es que la imagen que se muestra es una serie de capas que con el onmousemove cambia su color de fondo... Si dispones de php con las librerías GD te paso el código... que simplemente lee cada pixel de una imagen y asigna ese color a una capa.

Saludos

mauled · #12 (**permalink**) 31/01/2007, 11:01

Muchas gracias por responder!!!

Cuento con GD en mi servidor, de donde puedo descargar el script?
Prefieria que fuera un link

,para aquellos que vean este post puedan tambien descargarlo...

Saludillos.

caricatos · #13 (**permalink**) 31/01/2007, 11:20

Hola:

Mejor que un link, pongo el código:

Código:

<html>
<head>
<style type="text/css">
<?php
	function hexa($n)	{
		$digitosHexa = "0123456789ABCDEF";
		return $digitosHexa[$n / 16].$digitosHexa[$n % 16];
	}

	$correcto = true;

	if (isset($_GET["imagen"]))	{

		$imagen = $_GET["imagen"];
		if (isset($_GET["escala"])) $escala = $_GET["escala"];
		else $escala = 1;
		echo "div\t{position: absolute; width: $escala"."px; height: $escala"."px;}\r";
		$img = imagecreatefromstring(fread(fopen($imagen, "rb"), filesize($imagen)));

		if ($img)	{
			$ancho = imagesx($img);
			$alto = imagesy($img);
			for ($i = 0; $i < $ancho; $i ++)

				for ($j = 0; $j < $alto; $j ++)	{
					$pixelxy = imagecolorat($img, $i, $j);
					$rgb = imagecolorsforindex($img, $pixelxy);
					echo "#pixel_".$i."_$j {background-color: #"
						.hexa($rgb["red"])
						.hexa($rgb["green"])
						.hexa($rgb["blue"])
						."; left: ".($i * $escala)
						."; top: ".($j * $escala).";}\r";
				}
		}// fin if ($img)
		else
			$correcto = false;
	}// fin if (isset())
	else
		$correcto = false;

?>
body	{
	overflow: hidden;
}
</style>
<script>
function acomodar(ancho, alto)	{
	if (parent.acomodar) parent.acomodar(ancho, alto);
	else	alert("ancho: " + ancho + "\nalto: " + alto);
}

var pintar = "#000000";
var activa = false;
function activar_color(cual)	{
	//alert(cual);
	pintar = cual;
}

function pintando(que)	{
	if (activa) que.style.backgroundColor = pintar;
}
</script>
</head>
<body onload="acomodar(<? echo ($ancho * $escala).", ".($alto * $escala);?>)">
<?php
	if ($correcto)
		for ($i = 0; $i < $ancho; $i ++)
			for ($j = 0; $j < $alto; $j ++)
				echo "<div id='pixel_".$i."_$j' onmouseup='activa = false' onmousedown='activa = true' onmousemove='pintando(this)'></div>\r";
?>
</body>
</html>

En condiciones normales, comparto mis códigos.

La cuestión para generar una imagen sería la forma inversa, o sea crear la imagen con imagecreate(ancho, alto), y escribir pixel a pixel...

Saludos

mauled · #14 (**permalink**) 31/01/2007, 11:47

Supongo que este vendria siendo pixelear.php no?
De serlo podrias explicarme un poco el código.

Saludillos.

caricatos · #15 (**permalink**) 31/01/2007, 12:07

Cita:

Iniciado por mauled

Supongo que este vendria siendo pixelear.php no?
De serlo podrias explicarme un poco el código.

Saludillos.

Hola:

Bueno, como estamos en el foro javascript, te voy a explicar el funcionamiento javascript, y el php lo vamos a comentar más vagamente...

acomodar() invoca a la función "homónima" de la ventana padre (parent) con los argumentos de anchura y altura de la imagen que se pixela (se leen sus pixeles) para redimensionar el iframe donde se muestra la imagen pixelada.

pintar es una variable que se modifica desde la ventana padre con el color seleccionado para pintar.
activa es una variable booleana que se activa (pone a true) cuando se pincha en cualquier pixel de la imagen (mousedown) y desactiva al evento opuesto mouseup... con el movimiento del raton (mousemove) y el estado true de esta variable, el color de fondo se actualiza con el color de la variable pintar.

activar_color() actualiza la variable pintar con el color seleccionado en la ventana padre.

y pintando() cambia el color de fondo del elemento que se pasa como parámetro si la variable "activa" está true.

Estoy tratando de crear una imagen jpg... supongo que más tarde tendrás noticias mías.

Saludos

derkenuke · #16 (**permalink**) 31/01/2007, 19:01

Cita:

Iniciado por caricatos

derkenuke: Esos trabajos, merecen "un marquito" (con su paspartú) ya que son verdaderas obras de arte (¡A que sí!)

Desde luego.. qué cosas dices

caricatos · #17 (**permalink**) 01/02/2007, 00:40

Hola:

En el mismo enlace anterior hay un formulario (al que no hay que modificar) con un botón submit que al pulsarlo crea un archivo jpg en una ventana...
Ese formulario envía a una página php el tamaño (ancho y alto) y el volcado de pixeles de la nueva imagen...

el destino tiene este código:

Código:

<?php
$_ancho = (int) $_POST["ancho"];
$_alto = (int) $_POST["alto"];
$colores = explode(",", $_POST["pixeles"]);
$contador = 0;
$imagen = imagecreatetruecolor($_ancho, $_alto);
for ($i = 0; $i < $_ancho; $i++)
	for ($j = 0; $j < $_alto; $j++)
		imageSetPixel($imagen, $i, $j, hexdec($colores[$contador++]));
imagejpeg($imagen);
header("Content-type: image/jpeg");
imagedestroy($imagen);
?>

Y en los fichero pixelar (html y php) hay unas pequeñas modificaciones fáciles de implementar.

Saludos

mauled · #18 (**permalink**) 12/02/2007, 15:56

Caricatos, existe algun forma de averiguar cuales son los pixeles que han sido "pintados" dentro de la imagen? Puesto que no necesito crear una nueva imagen si no mas bien guardar las coordenadas y decirle a la aplicación que me dibuje los "garabatos" que hizo el usuario.

Y en que momento se "ejecuta" a al función activar_color()?

Saludillos.

caricatos · #19 (**permalink**) 12/02/2007, 16:52

Hola:

Tal vez sea mejor volver a leer cada pixel de la imagen y compararlo con el que se envía, o crear 2 arrays javascript... o simplemente crear el array sin contenido... pero luego el volcado habría que hacerlo, epecificando además del color las coordenadas...

Dime como debe mostrase el "garabato" para ver que se puede hacer.

Saludos

mauled · #20 (**permalink**) 12/02/2007, 17:40

1)Probando el script con una imagen de 330px x 400px me marca el siguiente error "Stack overflow at line = 115608" ¿A que se debe este error?

2)El problema esta en que el usuario puede hacer cualquier tipo de garabato

, no hay "figuras" definidas.

Saludillos.

caricatos · #21 (**permalink**) 13/02/2007, 01:07

Hola:

Las imágenes deberían ser más pequeñas (deberías poner un límite), fijate que con una imagen de 100x100 estás creando un array de 10000 elementos y una página con 10000 capas... cosa que ya sería algo exagerado...

Sobre los garabatos, como quieres que se vean, en otra imagen, o un array con los pixeles cambiados...

Saludos

caricatos · #22 (**permalink**) 13/02/2007, 04:46

Hola:

Bueno, hice un ejemplo que crea un fichero nuevo con los pixeles nuevos solamente: Pixelator

El array javascript se crea vacío, y al volcado cambia los "pixeles undefined" por un valor 1, y en la creación de la imagen, los pixeles con color 1 se consideran transparentes... La nueva imagen que se crea es un bmp, y en teoría podría usarse como icono (favicon)

Saludos

mauled · #23 (**permalink**) 13/02/2007, 11:09

Caricatos, de que forma se podria modificar el código para que funcione con imagenes "grandes",el problema del stack unicamente se presenta en IE y no en firefox.

¿Tendra que ver con el cache?
o bien me recomiendas mejor el uso de flash para manejar imagenes "grandes"?

Saludillos.

caricatos · #24 (**permalink**) 13/02/2007, 12:11

Hola:

Si el desbordamiento se produce al cargar la página, prueba con el nuevo sistema, o sea sin crear el array (solo inicializándolo):

Código:

var imagen = new Array(<?=$ancho;?>);
for (var i = 0; i < <?=$ancho;?>; i ++)
imagen[i] = new Array(<?=$alto;?>);

A mi me apareció el problema del overflow cuando abría la página iconizar.php sin estar en el sistema de frames, y fallaba el envío de datos al "parent"

Saludos

mauled · #25 (**permalink**) 14/02/2007, 11:06

Pues termino optando por la solución de panino, pues las imagenes con lo que voy a trabajar son "demensialmente" enormes, tengo una imagen de 2550px x 1883px, entonces generar un div para cada pixel es muy pero muy tardado.

Muchas gracias caricatos - panino, ampliaron un poco mas mi conocimiento en javascript

Saludillos.

caricatos · #26 (**permalink**) 14/02/2007, 12:09

Hola:

Posiblemente sea una buena solución, espero que no tengas problemas, pero ese número de pixeles (¡uff!) posiblemente sea muy pesado también con flash (tennos informados)...

La verdad es que me ha gustado el tema, y al menos estoy intentando mejorarlo algo (por ejemplo con las transparencias

)

Saludos

Panino5001 · #27 (**permalink**) 14/02/2007, 12:35

No es por ser pesado, pero insisto: lo mejor es hacerlo con Flash. Si el problema es guardar luego la imagen como imagen real, mirá esto (usa GD y la clase BitMapData):
http://www.tutoriales-flash.com/tutorial.asp?id_tuto=19
El trabajo de caricatos es excelente y sería bueno que lo continúe para convertirlo por ejemplo en un generador de favicons, pero para lo que vos querés hacer, no tengo dudas: Flash.

caricatos · #28 (**permalink**) 15/02/2007, 08:46

Cita:

Iniciado por Panino5001

...
El trabajo de caricatos es excelente y sería bueno que lo continúe para convertirlo por ejemplo en un generador de favicons, pero para lo que vos querés hacer, no tengo dudas: Flash.

Hola:

Gracias por el comentario... y seguiré algo más, pero a veces uno se traba en cosas tontas.
He pensado en ir guardando los iconos para poder rescatarlos y para ello he creado iframes dinámicamente, pero explorer "erre que erre" no permitía submitar en iframes creados dinámicamente... permite poner un atributo name, pero no admitía ese nombre en los target... seguramente pondré un mensaje con la solución...

La página está aquí: Pixelator... pinchando en el botón "reservar icono" se crea una miniatura... espero tener menos problemas para recuperarlos (simularía un "deshacer"...

Otro paso próximo será abrir ficheros... y hacer que funcionen las transparencias (no sé porqué me falla)

Bueno, si hay sugerencias o interesa algo concreto del código, no duden en participar.

Saludos

caricatos · #29 (**permalink**) 18/02/2007, 01:31

Hola:

El problema del envío a iframes creados dinámicamente es algo complejo, pero ahora funciona (al menos en los 3 navegadores probados), en primer lugar hay que discriminar a explorer y lo consigo con esto:

Código:

var _navegador = navigator.userAgent;
var op = /opera/i.test(_navegador); // opera
var mo = /gecko/i.test(_navegador); // mozilla

Y la condición sería !(op || mo)

Y el problema es que el iframe dinámico acepta el atributo name, pero en la colección de ventanas no se queda con ese nombre, así que se recorre la colección de iframes (los tags) y al encontrar el recién creado, asignar a la ventana correspondiente (por la indexación) el nombre del iframe

En resúmen, el código sería:

Código:

nuevo = cuentaIFrames++; // cuentaIFrames es global
nuevoNombre = "NIFrame" + nuevo.toString();
nuevoIframe = document.createElement("iframe");
with (nuevoIframe)	{
	frameBorder = 0;
	id = nuevoNombre;
	name = nuevoNombre;
	width = 32;
	height = 32;
	style.overflow = "hidden";
}
document.getElementById("colecciones").appendChild(nuevoIframe);
document.getElementById("colecciones").appendChild(document.createTextNode(""));
iFs = document.getElementsByTagName("iframe");

for (var i = 0, total = iFs.length; i < total; i ++)
	if (iFs[i] == nuevoIframe && !(op || mo))
		window.frames[i].name = iFs[i].name;

El enlace es el mismo, pero está mucho más funcional.

Saludos