Загрузка изображений большого размера в браузер с использованием URL-адреса BLOB-объектов в JavaScript

Question

Я создаю просмотрщик изображений, который должен отображать изображения большого размера (5-10 МБ) после загрузки с сервера. У меня есть требование, чтобы это изображение также можно было использовать где-то еще.

Я попытался загрузить изображение и преобразовать его в BLOB-объект и отобразить изображение из URL-адреса BLOB-объекта, чтобы при необходимости его не нужно было снова загружать с сервера. Ниже приводится краткое изложение того, что я сделал до сих пор:

        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).

Но в браузере IE, работающем на 32-битных машинах, я получаю следующее предупреждение, и при декодировании из URL-адреса большого двоичного объекта происходит сбой при рендеринге изображений, эта проблема не всегда воспроизводима (т. Е. Иногда рендеринг изображения происходит успешно, а иногда не удается).

Невозможно декодировать изображение по URL: 'blob:....'

Я искал эту проблему и нашел эту ссылку /questions/7252635/izobrazheniya-ne-zagruzhayutsya-v-ie-s-oshibkoj-dom-7009-nevozmozhno-dekodirovat-v-konsoli/7252673#7252673, но в моем случае это решение не работает. Я сомневаюсь, что это возможно из-за проблемы с памятью, но не уверен, пожалуйста, подскажите, что может быть возможной причиной этой проблемы.

Также будет полезно, если я установлю ответ в xml-запросе на 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
}