使用JavaScript中的Blob网址在浏览器中加载大尺寸图像

Question

我正在创建一个图像查看器，从服务器下载后需要显示大尺寸图像（5-10 mb）。我有一个要求，该图像也可以在其他地方使用。

我尝试下载该图像并将其转换为blob，并从blob URL显示该图像，因此不需要在需要时从服务器再次下载该图像。以下是到目前为止我所做的总结：

        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
            var urlCreator = window.URL || window.webkitURL;
            var url = urlCreator.createObjectURL(this.response), domImg = document.getElementById('#sample');

            domImg.onload = function () {
                domImg.onload = null;
                //do the rest
            }
            domImg.onerror = domImgError;
            domImg.src = url;
            domImg.crossOrigin = "Anonymous";
            domImg.style.width = "100%";
            domImg.style.display = "none";
        };
        //On image url loading fail
        xhr.onerror = xhr.onabort = domImgError;
        xhr.open('get', imgUrl);
        xhr.responseType = 'blob';
        xhr.send();

使用上述方法，我可以在所有主要浏览器（Chrome，firefox，Edge，Safari）中加载并显示图像。

但是在32位计算机上运行的IE浏览器中，我收到警告，并且从blob url解码时图像渲染失败，此问题并非总是可重现的（即，有时会成功发生图像渲染，有时会失败）。

无法解码URL：“ blob：....”上的图片

我查找了此问题，并找到了此链接https://stackoverflow.com/a/39792856/5545458， 但就我而言，此解决方案不起作用。我不确定这是否可能是由于内存问题引起的，但不确定，请向我建议可能导致此问题的原因。

如果我将xml请求中的响应设置为blob（如下所示）后将其设置为null，还会有帮助吗？

xhr.onload = function(){
    var urlCreator = window.URL || window.webkitURL;
    var url = urlCreator.createObjectURL(this.response), domImg = 
    document.getElementById('#sample');
    this.response = null;
    //rest goes here
}