JavaScriptで、画像URLをbase64に変換し、変換が完了するまで処理を止めたい

Question

画像のURLをbase64に変換する関数から、変換が終わるまで処理を停止させたいのですが、そのやり方が分かりません。

<script>
(function(){
	
	async function getBase64ImageFromUrl(imageUrl){
		var res = await fetch(imageUrl);
		var blob = await res.blob();
	
		return new Promise((resolve, reject) => {
			var reader  = new FileReader();
			reader.addEventListener("load", function () {
				resolve(reader.result);
			}, false);
	
			reader.onerror = () => {
				return reject(this);
			};
			reader.readAsDataURL(blob);
		})
	}
	
	function getBase64(url){
		let base64 = '';
		
		getBase64ImageFromUrl(url)
		.then(result => {
			base64 = result; //ここは通っている
		})
		.catch(err => console.error(err));
		
		return base64;
	}
	
	//データが入った状態で取得したい
	console.log(getBase64('/image.png'));

}());
</script>

変換自体は出来ているのですが、非同期処理なためconsole.logに入るデータは空白です。

getBase64ImageFromUrlは非同期関数になっていると思うので、await getBase64ImageFromUrlとしても「Uncaught SyntaxError: await is only valid in async function」とエラーが出ます。

base64は別の関数の返り値として使用したいのですが、この処理の流れが分からないため手元で止まっている状態です。

おそらく何か仕様を誤解していると思うのですが、ご教示いただけますでしょうか。

Comments

[yambejp]

説明がたりない
非同期で画像ファイルを読んでbase64に変換してコンソールに
表示するだけですか？なら別に非同期を待つ必要もなく
おわったら勝手に表示されませんか？

[sanset]

説明が足らず申し訳ございません。
画像パスを投げたら、base64に変換された値を取得する関数を作りたい、というのが今回の質問でしたので、例を分かりやすく変更しました。
getBase64()関数では、変換される前にreturnが走ってしまうため空のデータが返ってきます。

Answer 1

const getBase64ImageFromUrl=async(imageUrl)=>
  new Promise(resolve=>
    fetch(imageUrl).then(res=>res.blob()).then(blob=>{
      const reader = new FileReader();
      reader.addEventListener('load',()=>{
        resolve(reader.result); 
      });
      reader.readAsDataURL(blob);
    })
  );

(async()=>{
  const url='/image.png';
  console.log(await getBase64ImageFromUrl(url));
})();

Comments

[sanset]

ありがとうございます！asyncとawaitの使い方の正解として自分のと比較して検証してみます。

Answer 2

base64は別の関数の返り値として使用したいのですが

残念ながら、ブラウザJavaScriptの世界では、非同期処理で得られた結果を同期的に返すような方法は存在しません。

Promiseを返すなど、「非同期的に返す」しか手段はありません。

Comments

[sanset]

ありがとうございます！
それを知れただけで無駄に悩むことがなくなったので良かったです。
awaitとasyncの使い方は別途学んでいきます。