Ayuda Carga de Imagenes

devNicolas · 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 [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>

engel lex · 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

devNicolas · 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.

#!drvy · 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

engel lex · 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

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

Test Foro de elhacker.net SMF 2.1

Ayuda Carga de Imagenes

devNicolas

engel lex

devNicolas

#!drvy

engel lex