Angular2 - 渲染图像时超出最大调用堆栈错误

Question

在我的 Angular2 应用程序中，我想显示 Uint8Array 格式的图像。但是我得到 'Maximum Call Stack Exceeded'。我可以毫无错误地渲染大小为 ~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 个字符更大的块更有效，但这取决于您找到最快速的方法:)

Answer 2

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

这就是我的错误。

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

const safeUrl = domSanitizer.bypassSecurityTrustUrl(base64string)

就这样传下去

<img [src]="img">

Angular2 - 渲染图像时超出最大调用堆栈错误

Angular2 - Maximum Call Stack Exceeded error when rendering images

html

javascript

image-rendering

angular