1
    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);
        }
    }

Desta maneira ele esta carregando a imagem em image.src normal, mas preciso carregar as imagens (caminhos), da array: image.src = VARimg_categoria[y] dentro do laço for. Como faço isto tendo o tempo de carregamento do load()?

2 Respostas 2

1

Em vez de usar for, você pode fazer um loop numa função cada vez que uma imagem for carregada.

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

Dá uma olhada nesse Fiddle: https://jsfiddle.net/m6ft0jc3/3/

1
  • Deu certo, havia feito antes mas não tinha dado, acho que não estava passando o contador como parâmetro na função 'carregaImagem(y);' obrigado.
    – Rodrigo
    Commented 2/08/2017 às 4:41
1

Se entendi bem, seu laço for tem que ficar por fora de tudo:

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
        );
    }
}
2
  • Por fora, se tem 3 img por ex. só imprimi 1! Não sei se é o retorno da função DatecsPrinter ou se é o load() que não acompanha o for;
    – Rodrigo
    Commented 2/08/2017 às 1:13
  • O loop cria várias imagens e funções de onload, uma para cada imagem. Talvez o printImage é que não consiga lidar com uma fila de pedidos.
    – bfavaretto
    Commented 2/08/2017 às 1:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .