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 [Seleccionar]
<!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>