javascript - 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() 对于大型字符串数据，将遇到超出最大调用堆栈的情况。

为了能够将所述对象转换为 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 个字符更大的 block 会更有效，但这取决于您找到最快速的方法:)