Как вернуть изображение из этих вложенных функций

Question

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

function resizetoBlob(file) { //resizes given image file to blob 
     var blob = ""; 
     var reader = new FileReader(); 
     reader.onload = function() { 

      var tempImg = new Image(); 
      tempImg.src = reader.result; 
      tempImg.onload = function() { 

        //resize calculation done here 

        var dUrl = canvas.toDataURL('image/jpeg',0.8); 
        blob = dataURLtoBlob(dUrl); 
        //this is the blob object I need to return 
      } 
     } 
    reader.readAsDataURL(file); 
    return blob; //obviously this does not work. 
} 

Вот link to the function dataURLtoBlob.

Answer 1

Как вы асинхронно загружаете URL-адрес данных, вы не можете мгновенно return blob, вместо этого вы могли бы передать функцию как параметр, который должен быть выполнен, когда Data Url завершил создание. Например:

function resizetoBlob(file,func) { //resizes given image file to blob 
    var blob = ""; 
    var reader = new FileReader(); 
    reader.onload = function() { 

     var tempImg = new Image(); 
     tempImg.src = reader.result; 
     tempImg.onload = function() { 

       //resize calculation done here 

       var dUrl = canvas.toDataURL('image/jpeg',0.8); 
       blob = dataURLtoBlob(dUrl); 
       func(blob); //excute function, passing "blob" as a paramater 
     } 
    } 
reader.readAsDataURL(file); 
} 

И затем использовать эту функцию:

resizetoBlob(FILE,function(blob){ 
    //do whatever you wish with the blob 
    //this function will run when the blob is loaded (i.e dataUrl) 
    } 
); 

Для лучшего понимания, и видеть хорошие наглядные примеры asycronous деятельности, проверить "duplicate" resource.