Angular2 - イメージをレンダリングするときの最大呼び出しスタック超過エラー

Question

私のAngular2アプリケーションでは、Uint8Array形式のイメージを表示したいとします。しかし、私は '最大呼び出しスタック超過'を取得しています。 〜48Kbの画像をエラーなくレンダリングすることができました。しかし、画像サイズが〜300Kbを超えると、このエラーが発生します。これはイメージをレンダリングする方法です：

(<HTMLInputElement>document.getElementById("imagePreview")).src = "data:image/" + type + ";base64," + 
         btoa(String.fromCharCode.apply(null, objData.Body)); 

私は正しい方法でそれをやっているかどうか教えてもらえますか？そうでない場合は、それを正しく行う方法を教えてください

Answer 1

String.fromCharcode()は大きな文字列データを使ってmaximum call stack exceededになります。

上記のオブジェクトをbase64に変換するには、文字列の長さに基づいてループを実装する必要があります。このような何かが頭に浮かぶ：

let img: HTMLInputElement = (<HTMLInputElement>document.getElementById("imagePreview")); 
let bin : string = ''; 

for (let i = 0, l = objData.Body.length; i < l; i++) { 
    bin += String.fromCharCode(objData.Body[i]); 
} 

img.src = "data:image/" + type + ";base64," + btoa(bin); 

は、おそらくそれは、1つの文字より大きい部分の文字列のチャンクまでの、より効率的であるが、それは最も迅速な方法:)