Отправка и получение изображения imagepng через кодировку JSON AJAX

Я создал изображение в формате PNG с помощью библиотеки PHP GD, добавил текст, основанный на вводе пользователем, и вместо того, чтобы сохранять его, я хочу отображать его до тех пор, пока пользователь не примет изменения.

Они добавят несколько слов, поменяют шрифт и т. Д., Поэтому необходимо отобразить их изменения. Единственный способ заставить это работать - сохранить изображение на сервере, но оно сохраняет десятки изображений для десятков небольших изменений, которые вносит пользователь. Мне нужно либо перезаписать файл, либо сделать приведенную ниже идею, если это правильно. Идея заключается в создании временного файла для манипулирования.

Итак, как мне отправить его в "callback успеха" так же, как другие переменные, которые я обработал? Я прочитал о том, как использовать ob_get_contents() и я считаю, что предполагается как-то временно хранить изображение. Это как это работает?

Как отобразить изображение на странице формы (не на странице обработки PHP), и это хороший план, чтобы предотвратить сохранение на сервер, пока пользователь не выполнит коммит?

// more image manipulation code above

ob_start();
imagepng( $my_img );
$imageData = ob_get_contents();
ob_clean(); 

$results = array(
'price' => $_GET['priceX'],
'imageprocessed' => base64_encode($imageData) <<<  EDIT change based on answer.
);

$json = json_encode($results);
echo $json;
?>

РЕДАКТИРОВАТЬ: это JavaScript, используемый в обратном вызове успеха, чтобы получить base64_encode.

<script type="text/javascript">
function doGen(){
var priceX = $('#couponprice').val();

$.get('processimage.php',
{priceX:priceX}, 
function(data) {
var imgFldr = '/images/';                   
data = $.parseJSON(data);
$('.price-placeholder').html(data.price);
var imageCallback = (data.couponnamecall);
$('#couponbuilt img').attr('src', 'data:image/jpeg;base64,' + imageCallback);
// ...
});
return false;
};
</script>
Источник

2 ответа

Решение

Вы могли бы base64encode($imageData),

На стороне клиента вы просто создаете URL-адрес данных из данных, закодированных в base64, и передаете его в атрибут src тега изображения.

Я проверил это:

Код PHP

ob_start();
imagepng($my_img);
$imageData = ob_get_contents();
ob_clean(); 

$results = array(
  'price' => $_GET['priceX'],
  'image' => base64_encode($imageData)
);

$json = json_encode($results);
echo $json;

Javascript код:

$.getJSON("/ajax-script.php", function(data) {
  $("#element").append($("<img />").attr('src', 'data:image/png;charset=utf8;base64,' + data.image));
});
Источник

Вам не нужен JSON или XHR ("AJAX") для этого.

Самый простой подход состоит в том, чтобы просто создать изображение на лету и запросить его новое, изменив src вашего изображения на файл PHP, который создает изображение на лету.

Вы можете сделать это несколькими способами. Здесь описывается самое простое: если данных в вашей форме немного (нет килобайтов текста и т. Д.), То вы можете просто установить src предварительного изображения для URL-адреса вашего сценария создания PNG. Так что ваш img src - это PHP-скрипт, а не хранимый статический png-файл.

Убедитесь, что ваш принимающий скрипт PHP отправляет правильные заголовки (image/png), и вы готовы к работе. Вам понадобится JavaScript для сборки URL, и поместите его в img src.

Если вы хотите сделать изображение постоянным, просто добавьте в URL дополнительную пару имя / значение, например storepermanent=yes

Источник
Другие вопросы по тегам