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.
<!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>
dices lo que quieres, pero necesitas decir cual es tu problema para que sepamos por donde empezar a ayudarte
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.
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
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