Comunidad de diseño web y desarrollo en internet online

Ayuda Carga de Imagenes

Citar            
MensajeEscrito el 21 Ago 2014 12:26 pm
Hola gente de CristaLab, 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 Javascript :

<!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>

Por devNicolas

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 09 Sep 2014 12:42 pm
Lo de pintarla lo tienes claro, con drawimage y las colocas como quieras, luego para sacar un jpg debes usar canvas.toDataURL();
var imagen= canvas.toDataURL();
document.getElementById('miimagen').src = imagen;// la muestras
html:
<img id="miimagen" alt="Click derecho para descargarme">
Más info en mozzilla
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement

Por martinlab

3 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.