2

Preciso carregar algumas imagens pelo input file. Até aí tudo bem.

Porém, preciso que essas imagens sejam carregadas na ordem. Mas quando eu coloco o img.onload = function() {} dentro do for, a ordem da variável i, fica completamente diferente, com isso as imagens criadas pelo canvas, também ficam.

Como as imagens que eu estou carregando são muito grandes, preciso comprimi-las para quando for gerar o arquivo PDF não ficar com um tamanho imenso. 14 fotos estão dando 62MB de PDF.

Segue uma foto de como eu preciso que fique

E aqui é como fica, devido a variável i estar completamente fora de ordem

inserir a descrição da imagem aqui

Desde já muito obrigado.

var filesInput = $("#file");
filesInput.on("change", function(e) {

    $("#divImagesFrame").show();

    /* Manipulação das fotos */
    var files = e.target.files;
    var result = $("#divImagesFrame");
    var filesLength = this.files.length;

    var page = 1;
    var count = 6;

    $("#blur, #pageName").html($("#txtCliente").val());

    result.append("<div class='pageTitle'><div class='pageBox'>" + page + "</div><span>" + $("#txtCliente").val() + "<span class='localName'>" + $("#txtCampanha").val() + "</span></span></div>");

    for (let i = 0; i < this.files.length; i++) {

        qtdFotos++;
        let url = URL.createObjectURL(this.files[i]);
        let img = new Image();
        img.src = url;

        console.log("ID outside img.load: " + i);

        img.onload = function() {

            console.log("ID inside img.load: " + i);

            var busNumber = files[i].name.toString().split(".")[0];
            var dataFoto = files[i].lastModified;
            var d = new Date(dataFoto);
            d.toLocaleString();

            var canvas = document.createElement('canvas');
            canvas.width = 460;
            canvas.height = 360;
            ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

            var imageFile = canvas.toDataURL("image/JPEG", 1.0);

            /* In this result.append, if I put the image source = img.src the order of images stay ok, but the size is much larger */
            result.append("<div class='imageFrame' style='width:460px; border-radius:10px; height:360px; float:left; margin:14.01px 20px; box-shadow:1px 1px 3px 0.8px #999;'>" +
                "<div style='float:left;border-radius:10px 10px 0 0; background:linear-gradient(-90deg,#105e86,#125e86); display:block; width:450px; height:40px; font-weight:550; font-size:23px; line-height:40px; padding-left:10px; color:#FFF;'>" + busNumber + "<span style='font-size:18px; float:right; margin-right:20px;'>" + d.toLocaleDateString() + "</span></div>" +
                "<img width='460px' height='320px' style='border-radius:0 0 10px 10px; margin-bottom:5px;' src='" + imageFile + "'/></div>");

        }


    }

    sammiCreateBook();
});
0

0

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

Pesquise outras perguntas com a tag .