Используйте AJAX для отображения генерируемого php изображения

У меня есть php-скрипт, который случайно генерирует изображение. Что-то вроде этого:

<?php $image = imagecreatetruecolor(400,200); // process image // rendering image header("Content-type: image/jpeg"); imagejpeg($image); ?> 

Мой html выглядит так:

 <img id="image" src="/models/plugins/image.php"/> <button id="button">Get new image</button></body> 

Затем у меня есть файл jquery, который обрабатывает щелчок на кнопке, так что при нажатии кнопки загружается новое случайное изображение:

 $(function(){ $('#button').click(function(){ $.ajax({ url: 'models/plugins/image.php', success: function(data){ $('#image').html('<img src="' + data + '">') } }) }) }) 

Я использую firebug, я вижу, что этот запрос действительно отправлен и что ответ получен успешно, но изображение не изменяется.

Что я делаю неправильно и как я могу это исправить?

Я добавил еще один ответ, потому что я думаю, что ни один из предыдущих ответов не решил проблему. Я думаю, единственное, что хотел OP – это обновить (!) Изображение при нажатии кнопки. Таким образом, нет необходимости в запросе Ajax, просто перезагрузите изображение. И вы можете обеспечить это, добавив случайную строку запроса в атрибут src изображения.

 $('#button').click(function() { var $image = $('#image'); var plainSrc = $image.attr('src').split("?")[0]; // disregard previous query string $image.attr('src', plainSrc + "?" + (new Date().getTime())); }); 

Атрибут src тега изображения фактически ожидает, что URL-адрес не является фактическим данными JPEG.

Попробуй это:

  $(function(){ $('#button').click(function(){ $('#image').attr('src', 'models/plugins/image.php?rand=' + Math.floor(Math.random()*1000) ); }); }); 

Чтобы использовать изображение внутри атрибута src вам необходимо предоставить допустимый URI, например, URI данных :

 <?php $image = imagecreatetruecolor(400,200); // process image // create image URI ob_start(); imagejpeg($image); echo "data:image/jpeg;base64,", base64_encode(ob_get_clean()); ?> 

Я однажды собрал более подробный ответ на аналогичный вопрос.

Полученное изображение должно быть закодировано в base64, чтобы быть включенным как это.

Поэтому вам нужно сделать следующее:

  • Редактировать изображение
  • Получите полученное изображение в строке данных.
  • Чтобы получить строку изображения, вы либо храните ее в файловой системе, либо читаете ее через file_get_contents () (полезно для кеша) или используете imagejpeg () без места, что помещает изображение в выходной буфер. Чтобы получить значение из выходного буфера, используйте ob_start () и ob_get_contents ().
  • Преобразуйте строку данных изображения в base64 (используя base64_encode ())
  • Вернуть эту строку в браузер
  • Задайте для изображения «src» поле «data: image / png; base64, [BASE64]», где [BASE64] – это строка, возвращаемая с PHP.

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

Что-то вроде этого:

 $(function(){ $('#button').click(function(){ $.ajax({ url: 'models/plugins/image.php?t='+((new Date).getTime()), success: function(data){ $('#image').html('<img src="' + data + '">') } }) }) }) 

Вместо $('#image').html('<img src="' + data + '">') , попробуйте $('#image').attr('src', data);