Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] No he podido con este script

Estas en el tema de No he podido con este script en el foro de Javascript en Foros del Web. se supone que este código me genere canvas deacuerdo al numero de imagenes que escoja del input file multiple y además me inserte la imagen. ...
  #1 (permalink)  
Antiguo 21/07/2013, 11:27
 
Fecha de Ingreso: octubre-2011
Ubicación: Tierra
Mensajes: 64
Antigüedad: 10 años, 6 meses
Puntos: 0
Exclamación No he podido con este script

se supone que este código me genere canvas deacuerdo al numero de imagenes que escoja del input file multiple y además me inserte la imagen.

el error que no he podido solucionar es que siempre me pone la ultima imagen.

escojo 5 imágenes diferentes y me inserta los 5 canvas pero con la imagen ultima.

Código Javascript:
Ver original
  1. $(document).on('ready', iniciar);
  2.  
  3. function iniciar(){
  4.  
  5.     var URL = window.webkitURL || window.URL;
  6.     var inputFile = $('#pic');
  7.  
  8.     inputFile.change(function (event) {
  9.        
  10.     var lengthFile = inputFile.get(0).files.length;
  11.  
  12.         for(var i = 0; i < lengthFile; i++){
  13.             var file = this.files[i];
  14.             $('#sectionPreview').append('<canvas id="canvas'+i+'"></canvas>');
  15.            
  16.             var url = URL.createObjectURL(file);
  17.             var img = new Image();
  18.             img.src = url;
  19.             img.onload = (function (value) {
  20.                 return  function()
  21.                 {
  22.                     var canvas = document.getElementById('canvas' + value),
  23.                      ctx = canvas.getContext('2d');
  24.  
  25.                     canvas.width = 200;
  26.                     canvas.height = 200;
  27.                     ctx.drawImage(img, 0, 0, 200, 200);
  28.  
  29.                     var imageName = $('#imageName');
  30.                     imageName.val(file.name[value]);
  31.                     console.log('imageName: ' + file.name + ''+ value);
  32.  
  33.                     var contentType = $('#contentType');
  34.                     contentType.val(file.type);
  35.                     console.log('contentType: ' + file.type);
  36.  
  37.                     var imageData = $('#imageData');
  38.                     dataUrl = canvas.toDataURL('image/png').replace('data:image/png;base64,', '');
  39.                     imageData.val(dataUrl);
  40.                 };
  41.             })(i);         
  42.         }
  43.     });
  44. }

Última edición por juanvc123; 21/07/2013 a las 13:37
  #2 (permalink)  
Antiguo 24/07/2013, 07:38
Avatar de iukaeru  
Fecha de Ingreso: mayo-2012
Mensajes: 127
Antigüedad: 10 años
Puntos: 12
Respuesta: No he podido con este script

Hasta donde me acuerdo, si tienes "var img = new Image();" estás declarando UN solo elemento que aunque le pases un "for" no te cambiará ya que lo que haces es una pre-carga de UNA imagen por variable. Al realizar el bucle, se reemplaza el contenido de la variable "img".
Lo que puedes hacer, a mi parecer, es que si deseas realizar pre-carga de imágenes, insertes cada una en tantas variables como "canvas":

//Sucio pero efectivo
var img01 = new Image();
var img02 = new Image();
var img03 = new Image();
var img04 = new Image();
var img05 = new Image();

Última edición por iukaeru; 24/07/2013 a las 07:52
  #3 (permalink)  
Antiguo 24/07/2013, 08:09
Avatar de Aijoona
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 779
Antigüedad: 11 años
Puntos: 343
Respuesta: No he podido con este script

En tu defensa voy a decir que ese codigo es una mierda.

Separalo en funciones más atomicas y vas a ver que es mucho mas sencillo de lo que parece.
__________________
blog | @aijoona
  #4 (permalink)  
Antiguo 26/07/2013, 06:37
 
Fecha de Ingreso: octubre-2011
Ubicación: Tierra
Mensajes: 64
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: No he podido con este script

Cita:
Iniciado por Aijoona Ver Mensaje
En tu defensa voy a decir que ese codigo es una mierda.

Separalo en funciones más atomicas y vas a ver que es mucho mas sencillo de lo que parece.
Exacto separé por funciones! y ya se arregló.
  #5 (permalink)  
Antiguo 26/07/2013, 06:39
 
Fecha de Ingreso: octubre-2011
Ubicación: Tierra
Mensajes: 64
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: No he podido con este script

Cita:
Iniciado por iukaeru Ver Mensaje
Hasta donde me acuerdo, si tienes "var img = new Image();" estás declarando UN solo elemento que aunque le pases un "for" no te cambiará ya que lo que haces es una pre-carga de UNA imagen por variable. Al realizar el bucle, se reemplaza el contenido de la variable "img".
Lo que puedes hacer, a mi parecer, es que si deseas realizar pre-carga de imágenes, insertes cada una en tantas variables como "canvas":

//Sucio pero efectivo
var img01 = new Image();
var img02 = new Image();
var img03 = new Image();
var img04 = new Image();
var img05 = new Image();
Gracias por responder, ya arreglé el código
  #6 (permalink)  
Antiguo 26/07/2013, 10:50
Avatar de iukaeru  
Fecha de Ingreso: mayo-2012
Mensajes: 127
Antigüedad: 10 años
Puntos: 12
Respuesta: No he podido con este script

Cita:
Iniciado por Aijoona Ver Mensaje
En tu defensa voy a decir que ese codigo es una mierda.

Separalo en funciones más atomicas y vas a ver que es mucho mas sencillo de lo que parece.
En tu proceso de experticia incluye el respeto por el trabajo de quien vá un paso atrás, que de lo contrario no eres un profesional sino un simple ambicioso competidor más.
  #7 (permalink)  
Antiguo 26/07/2013, 12:05
Avatar de Aijoona
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 779
Antigüedad: 11 años
Puntos: 343
Respuesta: No he podido con este script

Ponerle palabras lindas a cosas que no lo son es mentir.

Si el código es una mierda, deberías revisar los motivos por el cual cae en esa catalogación en lugar de llorar por los adjetivos.

Y si, soy un profesional porque me pagan por hacer esto, por más que diga palabrotas.
__________________
blog | @aijoona
  #8 (permalink)  
Antiguo 27/07/2013, 08:22
Avatar de iukaeru  
Fecha de Ingreso: mayo-2012
Mensajes: 127
Antigüedad: 10 años
Puntos: 12
Respuesta: No he podido con este script

Cita:
Iniciado por iukaeru Ver Mensaje
En tu proceso de experticia incluye el respeto por el trabajo de quien vá un paso atrás, que de lo contrario no eres un profesional sino un simple ambicioso competidor más.
Cita:
Iniciado por Aijoona Ver Mensaje
Ponerle palabras lindas a cosas que no lo son es mentir.

Si el código es una mierda, deberías revisar los motivos por el cual cae en esa catalogación en lugar de llorar por los adjetivos.

Y si, soy un profesional porque me pagan por hacer esto, por más que diga palabrotas.
Reitero lo dicho arriba.

Última edición por iukaeru; 05/12/2013 a las 09:33

Etiquetas: image, img, jquery, upload
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:42.