通过json编码AJAX发送和接收imagepng输出

Question

我使用PHP GD Library创建了一个PNG图像,根据用户输入添加了一些文本,而不是保存它,我想显示它直到用户提交更改.

他们会添加几个单词,更改字体等,因此需要显示他们的更改.我实现此功能的唯一方法是将图像保存到服务器,但它可以保存数十个图像,用于用户进行的数十次轻微更改.我需要覆盖该文件,或者如果它是正确的话,请执行以下想法.想法是创建一个临时文件进行操作.

那么,我如何将其发送到"成功回调",就像我处理的其他变量一样？我读到了如何使用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;
?>

编辑:这是成功回调中用于接收base64_encode的javascript.

<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>   

Answer 1

你可以base64encode($imageData).

在客户端,您只需从base64编码数据中创建一个数据URL,并将其传递到图像标记的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));
});