Image loading inside for loop

Question

    var image = new Image();
    image.src = 'images/logos/jpg_group.jpg';
//  image.src = VARimg_categoria[y];            
    image.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.height = 250;
        canvas.width = 250;
        var context = canvas.getContext('2d');
        context.drawImage(image, 0, 0);
        var imageData = canvas.toDataURL('image/jpeg').replace(/^data:image\/(png|jpg|jpeg);base64,/, ""); //remove mimetype
        for(var y = 0; y < VARimg_categoria.length - 1; y++) {
            //image.src = VARimg_categoria[y];
            DatecsPrinter.printImage(
                imageData, //base64
                canvas.width, 
                canvas.height, 
            1);
        }
    }

This way he is carrying the image in image.src normal, but need to load the images (paths), from the array: image.src = VARimg_categoria[y] within the loop for. How do I do this by taking the charging time from load()?

Answer 1

If I understand correctly, your bow tie for has to stay out of everything:

for(var y = 0; y < VARimg_categoria.length; y++) {
    var image = new Image();
    image.src = VARimg_categoria[y];            
    image.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.height = 250;
        canvas.width = 250;
        var context = canvas.getContext('2d');
        context.drawImage(image, 0, 0);
        var imageData = canvas.toDataURL('image/jpeg').replace(/^data:image\/(png|jpg|jpeg);base64,/, ""); //remove mimetype

        DatecsPrinter.printImage(
            imageData, //base64
            canvas.width, 
            canvas.height, 
            1
        );
    }
}

Answer 2

Instead of using for, you can loop a function each time an image is loaded.

// exemplo de uma array com caminhos de 4 imagens separadas por vírgula
caminhos = "https://homepages.cae.wisc.edu/~ece533/images/airplane.png,https://homepages.cae.wisc.edu/~ece533/images/arctichare.png,https://homepages.cae.wisc.edu/~ece533/images/baboon.png,https://homepages.cae.wisc.edu/~ece533/images/frymire.png";
var VARimg_categoria = caminhos.split(",");

var y = 0;
var image = new Image();
function carregaImagem(y){
    image.src = VARimg_categoria[y];
    image.onload = function(){
        // para exemplificar, esta linha joga as imagens dentro de uma div
        document.getElementById("dvd").innerHTML = document.getElementById("dvd").innerHTML+y+'.<img height="50" src="'+image.src+'" />';

        // faz o que quiser aqui após o carregamento da imagem

        y++; // incrementa o y para ver se ainda há imagens
        if(y < VARimg_categoria.length){
            carregaImagem(y); // próxima imagem a ser carregada
        }else{ // else opcional quando todas as imagens tiverem sido carregadas
            alert("Todas a imagens foram carregadas");
        }
    }
}
carregaImagem(y); // chama a função

Take a look at this Fiddle: https://jsfiddle.net/m6ft0jc3/3/