1

Не могу самостоятельно осилить данную задачу. Прошу указать мне на ошибки.

Задача: Есть форма, из которой необходимо извлечь загруженную информацию и передать в обработчик.

Вся сложность заключается в том, что необходимо загруженные изображения обработать на стороне клиента и только после этого передавать. Поскольку обработка файлов изображений требует времени, результат этих функций получаю позже, чем формирую массив для последующей передачи данных. Подскажите, как правильно это сделать?

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>

1 ответ 1

0

UPD

Так будет работать, не хватало await перед getBase64(file).then...

  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; // Забираем файлы из поля "Фото общего вида"
    let ResizeImageArr = [];
    let newPhotoB64Array = [];
    let 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];
      await 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; // Забираем файлы из поля "Фото общего вида"
    let ResizeImageArr = [];
    let newPhotoB64Array = [];
    let 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];
      await 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; // Забираем файлы из поля "Фото общего вида"
    let ResizeImageArr = [];
    let newPhotoB64Array = [];
    let 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];
      await 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; // Забираем файлы из поля "Фото общего вида"
    let ResizeImageArr = [];
    let newPhotoB64Array = [];
    let 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];
      await 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;
  }




  function drawShelves() {
    Promise.all([
      F1(),
      F2(),
      F3(),
      F4(),
    ]).then(
      (result) => {
        console.log(result);
      }
    );

  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

2
  • спасибо большое, что откликнулись! Второй вариант отлично срабатывает. Но есть проблема, в каждом результате выполнения функция выводятся все файлы. prnt.sc/tM3uWAOPuce0 (Уточнение: эта ошибка встречается и в моем варианте. Так что я уже с этой проблемой пришёл) 24 фев 2022 в 16:57
  • @ВикторУспенский поправил ответ 24 фев 2022 в 18:06

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.