Обработка изображений из XMLHttpRequest (с HTML и Javascript)

Question

Я использую XMLHttpRequest для получения изображения с сервера (запускается локально из стороннего серверного апплета)

A упрощенная версия кода показана ниже.

Изображение возвращается в формате JPEG, а в возвращаемом заголовке отображается «content-type = image / jpg».Я могу просматривать информацию через Firebug для Firefox.

Однако у меня ужасное время, когда я могу показать фактическое изображение на веб-странице, потому что это данные изображения, которые возвращаются с сервера, а не URI к местоположению изображения.

Что такоеправильный способ отобразить это изображение из возвращенных данных?Должен ли я использовать тег <span>, тег <img> или тег <magical-show-image-from-data>?

function getXML(url, postData, requestStateChangeHandler){        
    if(window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {//Code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = requestStateChangeHandler;

    xmlhttp.open("POST", url, true);
    xmlhttp.setRequestHeader('Content-Type', 'text/xml');
    xmlhttp.setRequestHeader('Cache-Control', 'no-cache');
    xmlhttp.send(postData);
}


function requestStateChangeHandler(){
    if (xmlhttp.readyState == 4) 
    {
        if(xmlhttp.status == 200)
        {
            document.getElementById('results').innerHTML = xmlhttp.responseText;
        }
        else
            dump("Error loading page\n");
    }
}

Answer 1

Вы можете использовать встроенные изображения

на стороне сервера, кодировать ваш ответ в base64

при использовании php base64_encode("your data")
и в JavaScript

result = document.getElementById('results');
result.innerHTML = '<img src="data:image/gif;base64,' + xmlhttp.responseText + '"/>';

Answer 2

W3C работает над Файловым API и XMLHttpRequest Level 2 , чтобы обеспечить единообразную работу с Blob для ваших требований.Возможно, вы захотите выяснить, реализован ли какой-либо из существующих браузеров эта функция.

Answer 3

Вы должны использовать Ajax?Почему бы просто не добавить изображение в свой DOM?Когда я набираю следующий код в моем отладчике в chromium, он добавляет логотип PHP к текущей странице:

document.body.appendChild(document.createElement('img')).setAttribute('src', 'http://static.php.net/www.php.net/images/php.gif');

?

Answer 4

Кажется, что проще всего было бы настроить локальный прокси-сервис, к которому вы можете получить доступ через параметры GET и URL, а на бэкэнде он выполняет POST для исходного сервиса изображений, получает данные изображений обратно и передает его обратно вам. Затем вы просто помещаете URL вашего прокси (с параметрами) в атрибут img src.

<img src="http://myproxy/foo.jpg?param1=bar&param2=baz" />

Прокси-сервер myproxy отправляет запрос сервлету изображения соответственно.