PHP Lang
  1. PHP Lang
  3. Используйте AJAX для отображения генерируемого php изображения
Intereting Posts
Ошибка session_start (): open (/ var / lib / php / session error Как закрыть вкладку браузера после отправки формы? Laravel Blade без лишних пробелов? Запрос PHP DOMXPath с использованием innerHTML / nodeValue элемента для поиска и возврата элемента Сохранение вывода openssl_random_pseudo_bytes в Postgres с использованием php? Я получаю сообщение об ошибке: неверная последовательность байтов для кодирования "UTF8" как получить json-данные с php-сервера на Android-андроид Zend Framework 1.9 и интеграция доктрин Проверка, а затем перенаправление на почтовый маршрут в Ларавеле Столбец запроса драйвера php mongodb Войдите в ASP-сайт перед использованием PHP Простой HTML DOM Parser Laravel: Использование try … catch с DB :: transaction () Импортировать проект laravel 4.2 в eclipse Почему Apache не запускается на XAMPP # в URL-адресе, игнорирующемся в php 5.2 Когда нужно использовать intval и когда int

Используйте 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);