Últimos Temas de: devNicolas

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>