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

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

0 голосов
/ 26 сентября 2018

Я создаю программу просмотра изображений, которая должна отображать изображения большого размера (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: ....'

Я искал эту проблему и нашел эту ссылку https://stackoverflow.com/a/39792856/5545458,, но в моемВ случае, если это решение не работает.Я сомневаюсь, что это возможно из-за проблемы с памятью, но не уверен, пожалуйста, подскажите, что может быть возможной причиной этой проблемы.

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