Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: devNicolas en 21 Agosto 2014, 14:33 pm


Título: Ayuda Carga de Imagenes
Publicado por: devNicolas en 21 Agosto 2014, 14:33 pm
Hola gente, necesito cargar imagenes dinamicamente, y que se aloje adentro de otra imagen que esta a su vez dentro de un CANVAS. O sea en teoria tengo que hacer un montaje de dos imagenes y de esto sacar un solo .jpg.

Código:
<!doctype>
<html>
<head>
	<title> Prueba Montaje Imagenes </title>
	<script type="text/javascript">
	function subirImagen(){
	var canvas = document.getElementById('canvas');
	var contexto = canvas.getContext('2d');

		var foto = document.getElementById('foto').value;
		var img2 = new Image();
			
			img2.src = foto;
			alert(foto);
			contexto.drawImage(img2, 3, 90, 320, 210);
}
	</script>
</head>
<body>



<form method="post" enctype="multipart/form-data" onsubmit="javascript:subirImagen();" style="text-align:center;">
  <fieldset>
    <legend>Subir Imagen</legend>
    <input type="file" name="foto" id="foto">
    <input type="submit" value="Subir">
  </fieldset>
</form>

<canvas id="canvas" style="border: 2px solid black; margin-left: 35%;"></canvas>

<script type="text/javascript">
var canvas = document.getElementById('canvas');
var contexto = canvas.getContext('2d');

var img1 = new Image();
img1.src = 'image001.jpg';

img1.onload = function() {
    canvas.width = img1.width;
    canvas.height = img1.height;
   contexto.drawImage(img1, 0, 0);

};
</script>

</body>
</html>

Título: Re: Re: Ayuda Carga de Imagenes
Publicado por: engel lex en 21 Agosto 2014, 16:38 pm
dices lo que quieres, pero necesitas decir cual es tu problema para que sepamos por donde empezar a ayudarte

Título: Re: Re: Ayuda Carga de Imagenes
Publicado por: devNicolas en 21 Agosto 2014, 16:49 pm
Cita de: engel lex en 21 Agosto 2014, 16:38 pm
dices lo que quieres, pero necesitas decir cual es tu problema para que sepamos por donde empezar a ayudarte

Sii disculpa se me salteo esa parte, la primera imagen me la toma perfecto, pero la segunda la tiene que subir el usuario desde su PC, entonces intento subir una imagen y no funciona, y puse un alert para ver el valor que estaba tomando el 'foto' y me dice 'C/pathfat(o algo asi)/img2.jpg' y no esta ahi ese archivo.

Título: Re: Ayuda Carga de Imagenes
Publicado por: #!drvy en 21 Agosto 2014, 18:15 pm
La direccion que te dara el navegador cuando intentas mirar la ruta o bien es falsa o bien es inultil tenerla. El navegador tiene sandbox y falsifica las rutas para evitar exponer informacion del usuario.

Lo que tienes que hacer es subir la imagen a tu servidor o utilizar la FileAPI de javascript.

Saludos

Título: Re: Ayuda Carga de Imagenes
Publicado por: engel lex en 21 Agosto 2014, 19:31 pm
efectivamente, como dive drvy la solucion es fileAPI, aqui tienes algo al respecto sobre ello

http://stackoverflow.com/questions/6944382/dynamically-add-image-to-canvas
 (http://stackoverflow.com/questions/6944382/dynamically-add-image-to-canvas)

eso si, te advirto que al cargar la foto de la pc el navegador toma medidas de seguridad asi que hay chance que no te deje subir la foto o modificarla en ciertos casos


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines