JavaScript: как загружать изображения последовательно

Question

Извините за мой английский, это не мой родной язык.

Я пытаюсь сжать несколько изображений из входного файла.Но когда я попытался поместить

img.onload = function() {}

в цикл for, содержащий последовательность файлов, результаты добавления совершенно не в порядке.

Мне нужны изображения в последовательности, потому что я монтирую PDF с изображениями, номером автобуса и датой фотографии.

Исходные изображения слишком большие, 3 МБ +.И результирующий файл .pdf составляет 62 МБ.Это недоступно.

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

Вот как это должно быть:

А вот результат img.load, совершенно не в порядке.

Надеюсь, вы поможете мне, большое спасибо.

Проблема решена

Привет, ребята.Спасибо.Проблема была решена с помощью обещаний JavaScript, чтобы проверить, была ли завершена каждая функция.Еще раз спасибо!

Answer 1

1. Хранить URL-адреса изображения в массиве
2. Определить функцию, которая выполняет ваше поведение при загрузке (блок внутри цикла for)
   • В начале вашей функции вам нужновозьмите первый URL из этого массива и удалите его
   • В конце тела вашей функции вам нужно снова вызвать функцию.
3. Вызвать функцию.

Вот пример:

var images = [
    '1.jpg',
    '2.jpg',
    '3.jpg',
];

var loadImage = function() {
    if (!images.length) {
        // Will be executed when all images are loaded
        return;
    }

    var image = images.shift();

    console.log('loading image ' + image);

    // Your for-loop logic here

    ...

    img.onload = function() {
        console.log('image loaded ' + image);
        // Your onload logic here ...

        // -> important!
        loadImage();
    };
}

loadImage();