0

Buenas, tengo un bucle que recorre un array en el cual pueden existir o no imagenes cargadas, el tema es que al cagar estas imagenes en un canvas y hacerlo de la manera que especifica en MSDN solo consigo cargar la ultima imagen el mismo numero de veces que imagenes tengo en el array. Esto sucede por que se pinta la imagen con el evento onload que es llamado al finalizar la carga de la pagina, por lo que el bucle ya ha terminado y por tanto solo tengo la informacion de la ultima iteracion.

       for (var i=0; i<array.length; i++){
         var data=array[i].campoImagen;
         var DOMURL = window.URL || window.webkitURL || window;
         var img = new Image();
         var svg = new Blob([data], {type: 'image/svg+xml'});
         var url = DOMURL.createObjectURL(svg);
         img.onload = function() { 
           ctx.drawImage(img, Window.posx,Window.posy);
           DOMURL.revokeObjectURL(url);
         }
         img.src=url;
       }

Ademas, otro problema es que de este modo las imagenes siempre me quedan dibujadas encima de los textos pues son las ultimas en cargarse en el canvas.

Alguna alternativa para cargar cada imagen en su correspondiente iteracion?.

1 respuesta 1

0

Estás redefiniendo la variable img en cada iteración del loop.

Podrías hacerlo declarando cada variable como un array

var img = [],
    svg = [],
    url = [],
    DOMURL = window.URL || window.webkitURL || window;    
for (var i=0; i<array.length; i++){
     var data=array[i].campoImagen;

     var img[i] = new Image();
     var svg[i] = new Blob([data], {type: 'image/svg+xml'});
     var url[i] = DOMURL.createObjectURL(svg[i]);
     img[i].onload = function() { 
       ctx.drawImage(img, Window.posx,Window.posy);
       DOMURL.revokeObjectURL(url[i]);
     }
     img[i].src=url[i];
   }

Aunque sería más elegante definir una función en donde cada variable tenga scope sólo en la función.

var DOMURL = window.URL || window.webkitURL || window;
var procesaImg = function(data) {
     var img = new Image();
     var svg = new Blob([data], {type: 'image/svg+xml'});
     var url = DOMURL.createObjectURL(svg);
     img.onload = function() { 
       ctx.drawImage(img, Window.posx,Window.posy);
       DOMURL.revokeObjectURL(url);
     }
     img.src=url;
};

for (var i=0; i<array.length; i++){
     var data=array[i].campoImagen;
     procesaImg(data);
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.