AngularJSサービスでfileReaderの結果を返すことができません

Question

HTML入力要素から画像ファイルを読み込むサービスを作成しようとしています。このサービスは、読み込まれたイメージファイル（base64文字列）の更新された属性を持つHTML imgオブジェクトを返すようにします。私のサービスは今、このです：

.service('ReadLocalImageService', [function() { 

    this.openLocalImage = function (file) { 
     var img = document.createElement("img"); 
     var fileReader = new FileReader(); 
     fileReader.onload = function (e) { 
      img.src = e.target.result; 
     }; 
     fileReader.readAsDataURL(file); 
     return img.src; 
    }; 

}]); 

この場合img.srcは、このように、空に返されます。

私はfileReader.onload内console.log(img.src)を入れた場合、それは私が欲しいものを出力します。 openLocalImageはe.target.resultが割り当てられる前にimg.srcを返すようです。

私はこれを回避したり、この問題について正しいトピックを見つけることができませんでした。誰も私がこれを解決するのを助けてくれるのか、なぜそれがうまくいかないのか説明してくれませんか

Answer 1

imgがまだ読み込まれていないためです。ここでは、callback関数を渡すと、そのPARAMとしてimg.srcを受け取ることになります解決策

.service('ReadLocalImageService', [function() { 

    this.openLocalImage = function (file, callback) { 
     var img = document.createElement("img"); 
     var fileReader = new FileReader(); 
     fileReader.onload = function (e) { 
      img.src = e.target.result; 
      callback(img.src); 
     }; 
     fileReader.readAsDataURL(file); 
    }; 

}]); 

です。使用するには

ReadLocalImageService.openLocalImage(myImage, function(imgSrc) { 
    // use imgSrc 
});