Modificar una foto en una web...

Capi666 · #1 (**permalink**) 30/11/2007, 03:22

Hola, tengo un problema, no se si sera este buen sitio o mejor en javascript... Tengo una web, subo una foto a la web, la visualizo, y me gustaria poner una especie de cruz donde yo marque con el ratón y después guardarla de nuevo con las cruces que haya señalado. ¿Es posible? ¿Esta en buen sitio la pregunta o mejor en otro apartado?

Gracias,

Capi666 · #2 (**permalink**) 30/11/2007, 10:34

Nadie sabe nada? Es el sitio adecuado?

GatorV · #3 (**permalink**) 30/11/2007, 10:36

Esto es interacción directo con el cliente, en Javascript es algo complicado así que te recomendaría hacerlo con Flash.

Saludos.

franco190453 · #4 (**permalink**) 30/11/2007, 14:06

Capi666:
Lo que si puedes hacer con php
es ponerle una marca de agua o "Watermark" a cualquier imagen
Para ello debes tener la imagen y sus caracteristicas de tamaño
y utilizando el photoshop creas una imagen .png para ser
utilizada en el programa e insertarla en la imagen principal;
logicamente la marca de agua debe ser mucho mas pequeña que la imagen principal.
php tiene la funcion imagecopymerge() para insertar la imagen .png
en la imagen principal que puede ser una .jpg.
Es importante jugar con la posicion de la imagen .png y saber las coordenadas para decidir donde la quieres ubicar.
Una vez hecho el programa el proceso es casi instantaneo.
Saludos Y espero te ayude
Franco

Capi666 · #5 (**permalink**) 01/12/2007, 04:40

Hola, buscando buscando he encontrado esto... ¿Se puede hacer?

http://www.forosdelweb.com/f18/modif...rdarla-521570/

Gracias a los dos,

Capi666 · #6 (**permalink**) 01/12/2007, 13:51

Bueno, he avanzado bastante, os enseño lo que tengo y mis problemas:

Código:

<?
if ($_POST["x"] <> NULL) {
header("Content-type: image/jpeg");

// Creamos las dos imágenes a utilizar 
$imagen1 = imagecreatefromjpeg("imagen.jpg");
$imagen2 = imagecreatefromjpeg("x.jpg");

// Copiamos una de las imágenes sobre la otra 
imagecopy($imagen1,$imagen2,$_POST["x"],$_POST["y"],0,0,137,84);

// Damos salida a la imagen final 
imagejpeg($imagen1);

// Destruimos ambas imágenes
imagedestroy($imagen2);
imagedestroy($imagen1);
}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript"> 
<!-- inicio 
var IE = document.all?true:false 
if (!IE) document.captureEvents(Event.MOUSEMOVE) 

document.onmousemove = posicRatonXY; 
var posicX = 0 
var posicY = 0 

function posicRatonXY(e) { 
if (IE) { posicX = event.clientX + document.body.scrollLeft; 
posicY = event.clientY + document.body.scrollTop} 
else { posicX = e.pageX; posicY = e.pageY }; 
if (posicX < 0) {posicX = 0}; 
if (posicY < 0) {posicY = 0}; 

document.getElementById("Raton").x.value = posicX; 
document.getElementById("Raton").y.value = posicY; 
return true } 
// final --> 

function obtenerPos(event)
{
if(document.all)
diferencia=2;
else
diferencia=0; 
x=event.clientX-document.visor.offsetLeft-diferencia;
y=event.clientY-document.visor.offsetTop-diferencia;

document.Raton.submit();

}
</script> 
</head>

<body>
<img name="visor" src="imagen.jpg" onClick="obtenerPos(event)">

<div style="text-align:center"> 
<form id="Raton" name="Raton" action="" method="post"> 

<input type="hidden" id="x" name="x" value="0" size="4" style="text-align:right"> 

<input type="hidden" id="y" name="y" value="0" size="4" style="text-align:right">

<input type="submit">

</form> 
</div> 

</body>
</html>

Ok, vale, me sale todo correcto, me sale la nueva imagen superpuesta con la otra imagen donde yo le he dicho, pero... ¿como la puedo guardar?

Y otra cosa mas dificil, ¿como podria marcar varios sitios?

Gracias,

franco190453 · #7 (**permalink**) 01/12/2007, 14:24

Capi666:
Para guardarla se hace asi:
Antes de $imagedestroy(....);
En Vez De:
$imagejpg($imagen1);
Pon esto:
imagejpeg( $imagen1, "archivos/$imagen" );
Saludos
Franco