Обещания, у меня возникли проблемы с возвратом другой функции

Question

У меня есть холст, который я хочу загрузить в формате PNG как изображение, я получил его на работу, но я хочу, чтобы мой пользователь выбрал имя файла.

Я пытался заставить егонапишите имя файла с обещанием.Но мой вопрос: не могу ли я создать функцию, в которой он запрашивает имя файла у пользователя, и когда он возвращает имя, начинается загрузка?Вот мой код:

function downloadAsPNG() {
  //Download the image
  let image = new Image();
  image.src = document.getElementById("defaultCanvas0").toDataURL("image/png");
  new Promise(function(nameOfFile) {
    nameOfFile(askNameOfFile());
  }).then(function(result) {
    let nameFile = result + ".png";
    document.getElementById("downloadPNG").download = nameFile;
    return document.getElementById("downloadPNG").href = image['attributes']['src']['nodeValue'];
  });
}

Вот функция, которую я хочу вызвать, чтобы узнать имя файла:

function askNameOfFile() {
  let nameOfFile = '';
  let inputNameHTML = "<form id='FormFileName'><input type='text' id='nameOfFile'><input type='submit' id='sendNameOfFile'></form>";
  document.getElementById('NameOfFileContainer').innerHTML = inputNameHTML;
  document.getElementById('FormFileName').addEventListener('submit', function(event) {
    event.preventDefault();
    nameOfFile = event.target.childNodes[0].value;
    return nameOfFile;
  });
}

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

Answer 1

Вы можете попробовать askNameOfFile () вернуть обещание, например так:

function downloadAsPNG() {
  askNameOfFile().then(function(result) {
    console.log('result ==> ' , result);
  });
}


function askNameOfFile() {
let nameOfFile = '';
let inputNameHTML = "<form id='FormFileName'><input type='text' id='nameOfFile'><input type='submit' id='sendNameOfFile'></form>";
document.getElementById('NameOfFileContainer').innerHTML = inputNameHTML;

return new Promise((resolve,reject) => {
  document.getElementById('FormFileName').addEventListener('submit',      function(event) {
    event.preventDefault();
    nameOfFile = event.target.childNodes[0].value;
    resolve(nameOfFile);
  });




});
  

}

<button onclick="downloadAsPNG()">Ask for File Name asdf</button>

<div id="NameOfFileContainer"></div>