Не могу самостоятельно осилить данную задачу. Прошу указать мне на ошибки.
Задача: Есть форма, из которой необходимо извлечь загруженную информацию и передать в обработчик.
Вся сложность заключается в том, что необходимо загруженные изображения обработать на стороне клиента и только после этого передавать. Поскольку обработка файлов изображений требует времени, результат этих функций получаю позже, чем формирую массив для последующей передачи данных. Подскажите, как правильно это сделать?
async function resizeBase64Img(base64, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");
var deferred = $.Deferred();
$("<img/>").attr("src", base64).on('load', function() {
context.scale(width / this.width, height / this.height);
context.drawImage(this, 0, 0);
deferred.resolve(canvas.toDataURL());
});
return deferred.promise();
}
async function F1() {
let filesArr1 = document.getElementById('file1').files; // Забираем файлы из поля "Фото общего вида"
ResizeImageArr = [];
newPhotoB64Array = [];
numCreated = 0; //Заводим счётчик для проверки выполнения цикла
for (var i = 0; i < filesArr1.length; i++) {
//filesArr1B64.push(getBase64(filesArr1[i])); // Переводим в base64 и наполняем массив
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
let file = filesArr1[i];
getBase64(file).then(
data => (resizeBase64Img(data, 1200, 1200).then(function(newImg) {
newPhotoB64Array.push(newImg);
}))
);
numCreated++;
if (numCreated === filesArr1.length) { //Если счётчик равен длинне массива - передаем готовый массив в функцию для вывода значения
ResizeImageArr = newPhotoB64Array;
}
}
//console.dir(ResizeImageArr0);
return ResizeImageArr;
}
async function F2() {
let filesArr2 = document.getElementById('file2').files; // Забираем файлы из поля "Фото общего вида"
ResizeImageArr = [];
numCreated = 0; //Заводим счётчик для проверки выполнения цикла
for (var i = 0; i < filesArr2.length; i++) {
//filesArr1B64.push(getBase64(filesArr1[i])); // Переводим в base64 и наполняем массив
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
let file = filesArr2[i];
getBase64(file).then(
data => (resizeBase64Img(data, 1200, 1200).then(function(newImg) {
newPhotoB64Array.push(newImg);
}))
);
numCreated++;
if (numCreated === filesArr2.length) { //Если счётчик равен длинне массива - передаем готовый массив в функцию для вывода значения
ResizeImageArr = newPhotoB64Array;
}
}
//console.dir(ResizeImageArr0);
return ResizeImageArr;
}
async function F3() {
let filesArr3 = document.getElementById('file3').files; // Забираем файлы из поля "Фото общего вида"
ResizeImageArr = [];
numCreated = 0; //Заводим счётчик для проверки выполнения цикла
for (var i = 0; i < filesArr3.length; i++) {
//filesArr1B64.push(getBase64(filesArr1[i])); // Переводим в base64 и наполняем массив
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
let file = filesArr3[i];
getBase64(file).then(
data => (resizeBase64Img(data, 1200, 1200).then(function(newImg) {
newPhotoB64Array.push(newImg);
}))
);
numCreated++;
if (numCreated === filesArr3.length) { //Если счётчик равен длинне массива - передаем готовый массив в функцию для вывода значения
ResizeImageArr = newPhotoB64Array;
}
}
//console.dir(ResizeImageArr0);
return ResizeImageArr;
}
async function F4() {
let filesArr4 = document.getElementById('file4').files; // Забираем файлы из поля "Фото общего вида"
ResizeImageArr = [];
numCreated = 0; //Заводим счётчик для проверки выполнения цикла
for (var i = 0; i < filesArr4.length; i++) {
//filesArr1B64.push(getBase64(filesArr1[i])); // Переводим в base64 и наполняем массив
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
let file = filesArr4[i];
getBase64(file).then(
data => (resizeBase64Img(data, 1200, 1200).then(function(newImg) {
newPhotoB64Array.push(newImg);
}))
);
numCreated++;
if (numCreated === filesArr4.length) { //Если счётчик равен длинне массива - передаем готовый массив в функцию для вывода значения
ResizeImageArr = newPhotoB64Array;
}
}
//console.dir(ResizeImageArr0);
return ResizeImageArr;
}
async function drawShelves() {
let res1 = await F1();
console.log(res1);
let res2 = await F2();
console.log(res2);
let res3 = await F3();
console.log(res3);
let res4 = await F4();
console.log(res4);
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<form id="mainForm">
<input id="file1" type="file" name="file-0[]" accept="image/*,video/*" multiple>
<input id="file2" type="file" name="file-0[]" accept="image/*,video/*" multiple>
<input id="file3" type="file" name="file-0[]" accept="image/*,video/*" multiple>
<input id="file4" type="file" name="file-0[]" accept="image/*,video/*" multiple>
<button type="button" onclick="drawShelves();">Отправить</button>
</form>