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个字符的字符串，但是这是由你来找到最快捷的方式:)