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

Question

У меня есть скрипт 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 + '">') 
      } 
     }) 
    }) 
}) 

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

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

Answer 1

Я добавил еще один ответ, потому что я думаю, что ни один из предыдущих ответов не решить эту проблему. Я думаю, единственное, что хотел 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())); 
}); 

Answer 2

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

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

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

Answer 3

Чтобы использовать изображение внутри src атрибута необходимо предоставить действительный URI, например data-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()); 
?> 

Я однажды скомпилирован a more detailed answer на подобный вопрос ,

Answer 4

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

Так что вам нужно сделать следующее:

• Отредактируйте изображение
• Get результирующее изображение в строке данных.
• Чтобы получить строку изображения, вы либо храните ее в файловой системе, либо читаете ее через file_get_contents() (полезно для кеша) или используете imagejpeg() без местоположения, что помещает изображение в выходной буфер. Чтобы получить значение из выходного буфера, используйте ob_start() и ob_get_contents().
• Преобразование строки данных изображения в base64 (с использованием base64_encode())
• вернуть эту строку в браузере
поле
• Набор изображений «SRC» на «данные: изображения/PNG; base64, [BASE64]», где [ BASE64] - это строка, возвращаемая с PHP.

Answer 5

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

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

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

Answer 6

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