[SOLUCIONADO] No he podido con este script

[juanvc123]

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:

$(document).on('ready', iniciar);
 
function iniciar(){
 
    var URL = window.webkitURL || window.URL;
    var inputFile = $('#pic');
 
    inputFile.change(function (event) {
        
    var lengthFile = inputFile.get(0).files.length;
 
        for(var i = 0; i < lengthFile; i++){
            var file = this.files[i];
            $('#sectionPreview').append('<canvas id="canvas'+i+'"></canvas>');
            
            var url = URL.createObjectURL(file);
            var img = new Image();
            img.src = url;
            img.onload = (function (value) {
                return  function()
                {
                    var canvas = document.getElementById('canvas' + value),
                     ctx = canvas.getContext('2d');
 
                    canvas.width = 200;
                    canvas.height = 200;
                    ctx.drawImage(img, 0, 0, 200, 200);
 
                    var imageName = $('#imageName');
                    imageName.val(file.name[value]);
                    console.log('imageName: ' + file.name + ''+ value);
 
                    var contentType = $('#contentType');
                    contentType.val(file.type);
                    console.log('contentType: ' + file.type);
 
                    var imageData = $('#imageData');
                    dataUrl = canvas.toDataURL('image/png').replace('data:image/png;base64,', '');
                    imageData.val(dataUrl); 
                };
            })(i);          
        }
    });
}
 

[iukaeru]

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();

[Aijoona]

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.

[juanvc123]

Iniciado por Aijoona

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ó.

[juanvc123]

Iniciado por iukaeru

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

[iukaeru]

Iniciado por Aijoona

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.

[Aijoona]

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.

[iukaeru]

Iniciado por iukaeru

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.

Iniciado por Aijoona

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.