0

在我的 Angular2 应用程序中，我想显示一个 Uint8Array 格式的图像。但我得到“超出最大调用堆栈”。我可以毫无错误地渲染大小约为 48Kb 的图像。但是当图像大小高于 ~300Kb 时，我就会收到此错误。这就是我渲染图像的方式：

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

有人可以告诉我我是否以正确的方式做这件事。如果没有，请告诉我如何正确执行

4

2 回答 2

2

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 个字符更大的块更有效，但这取决于您找到最快速的方法 :)

于 2016-07-05T06:24:57.357 回答
0

我在从 DB 渲染 base64 16K 分辨率图像时遇到了这个问题，但这与上面的答案无关。

这就是我的错误。 那是

如您所见，这是由消毒过程引起的。因此，就我而言，我必须信任该图像以防止运行清理检查。这个字符串为我解决了这个问题，希望对某人有所帮助。 

const safeUrl = domSanitizer.bypassSecurityTrustUrl(base64string)

就这样通过

<img [src]="img">
于 2020-01-20T12:19:46.670 回答