Танцы с бубном, AJAX и изображениями)

[Arhangel64]

Доброго времени суток!)
Ситуация следующая. На сервере есть ряд изображений, их адреса и имена с разрешениями зарегистрированы в БД. Есть php скрипт, который методом GET получает информацию о нужном изображении, опрашивает БД, открывает нужное изображение, с помощью библиотеки GD преобразует изображение к формату 100х100 и отправляет пользователю с заголовками, о том, что сейчас прилетит изображение.
Надо все это для отображения превьюшек для полноразмерных картинок. Механизм был следующим, php строил циклом ряд этих превью, ссылаясь на php скрипт сформированным циклом GET запросом в атрибуте src тега img. Проблема возникла, когда ряд превьюшек перестал влезать в рамки поля для превью. Я подумал, что было бы логично поставить стрелочки для листания поля, при нажатии на которую будет отправлен AJAX запрос этому php скрипту. Когда сервер ответит, JS должен будет сформировать свежеподгруженное изображение и поместить его в поле, в освободившееся место, а остальные изображения сдвинуть.
Теперь к сути проблемы. В инструментах разработчика, я вижу, что изображения сервер присылает, заголовки приходят корректно, однако как-то увязать .responseText с тегами IMG или iframe у меня не выходит. Подскажите пожалуйста, каким образом можно работать с изображением пришедшим таким образом?

[danik.js]

Для подгрузки изображений тебе не нужен XMLHttpRequest, потому что картинки и так подгружаются асинхронно. Для подгрузки нового изображения просто установи новое свойство src уже существующей картинки или создай новую ( через new Image() или document.createElement('img') )

[Arhangel64]

Ну, в принципе, да. Ничто не мешает мне опрашивать базу AJAXом только для формирования данных для GET запроса, вставлять в свойство src картинки тот же php скрипт со сформированным JS GET запросом. Однако. чисто теоретический вопрос никак не покидает голову. Куда же записать ответ из .responseText так, что бы он в итоге рисовал картинку...

[Яростный Меч]

Однако. чисто теоретический вопрос никак не покидает голову. Куда же записать ответ из .responseText так, что бы он в итоге рисовал картинку...

использовать Data URL
этот способ не работает только в IE7-

[danik.js]

опрашивает БД, открывает нужное изображение, с помощью библиотеки GD преобразует изображение к формату 100х100 и отправляет пользователю с заголовками, о том, что сейчас прилетит изображение.

А как же кэширование готовых превьюшек в файлы? Хотя 100x100 должно быть генерятся быстро...

Ничто не мешает мне опрашивать базу AJAXом только для формирования данных для GET запроса, вставлять в свойство src картинки тот же php скрипт со сформированным JS GET запросом.

Два запроса - это плохо. Почему нельзя сразу сформировать (без лишнего запроса) нужный URL картинки.

Куда же записать ответ из .responseText так, что бы он в итоге рисовал картинку

Не responseText, а response. Кроссбраузерно - никак. Нормальные браузеры умеют работать с бинарными данными.

[Arhangel64]

Да, в самом деле, проще всего было бы нарезать от каждой картинке про превью, но решил, что это не круто, что было бы интереснее рисовать их на лету.
Сразу знать url картинки не могу, так как все что знает js в то время, как происходит первый запрос - порядковый номер картинки по дате загрузки, пользователя, и альбом. Нужно опросить базу, узнать есть ли следующая картинка, есть есть - то прислать её представление в бинарном виде.
Понравилась идея с data:url, но возникают несколько вопросов.
Используют ли функции GD типа imagejpeg() imagegif() встроенное кодирование, или нужно дополнительно закодировать строку их вывода, допустим, в base64?
в xhr.respose содержится ответ сервера с изображением - строкой.
действие происходит после создания тега img и присвоению ему всех атрибутов кроме src.
Ссылка на ID дана на уже вставленный в DOM объект img

document.getElementById('tinyAva'+d).src = 'data:image/jpeg;base64,'+xhr.response;

почему-то браузер игнорирует data: и отправляет запрос этому очень длинному url. Что я не так делаю?(

[Яростный Меч]

в xhr.respose содержится ответ сервера с изображением - строкой.

а строка точно base64 для картинки?

imagejpeg(), если верить хелпу, в base64 не кодирует, для этого есть base64_encode()

[Arhangel64]

Poznakomlus, благодарю, скорее всего так в итоге и сделаю, но для начала хочу освоить нынешний метод с целью общего развития.


Яростный Меч, В ext расширение файла, pict2 - необходимое изображение
Тоже вроде прочел, что ничего не сказано, про кодировку, решил дописать, вот фрагмент кода php, который формирует изображение.

switch ($ext) {
case 'jpg':
header ('Content-type: image/jpeg');

imageColorTransparent ($pict2, $black);
echo base64_encode(imagejpeg($pict2));
break;

По идее, должно работать, но проблема не в том, браузер неправильно расшифровывает картинку, проблема в том, что он отправляет запрос, когда указан Data: ....

[danik.js]

проблема в том, что он отправляет запрос, когда указан Data

В отладчике такой запрос может отображаться. Фактически же никаких HTTP-запросов не происходит.

[danik.js]

В идеале оно так (запусти код в консоли F12):

var oReq = new XMLHttpRequest();
oReq.open("GET", "http://javascript.ru/forum/images/ca_serenity/misc/logo.gif", true);
oReq.responseType = "blob";

oReq.onload = function(oEvent) {
  var blob = oReq.response;
  var image = new Image();
  image.src = URL.createObjectURL(blob);
  image.style.cssText = 'position:fixed;top:0;left:0';
  document.body.appendChild(image)
};

oReq.send();

В чем преимущество над data:uri? В том что бинарные данные остаются нетронутыми, не происходит нелепая конвертация binary -> text -> binary