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编码数据中创建一个数据网址，并将其传递到图像标记的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));
});

Answer 2

你不需要json或XHR（'ajax'）。

最简单的方法是简单地即时创建图像，并通过将图像的src更改为即时生成图像的PHP文件来请求新图像。

您可以通过多种方式完成此操作。最简单的描述如下：如果表单中的数据不多（没有千字节的文本等），那么您只需将预览图像的src设置为PNG生成脚本的URL即可。所以你的img src是一个PHP脚本，而不是存储的静态png文件。

确保您接收的PHP脚本发送了正确的标题（image / png），您就可以开始了。您需要一些JavaScript来组装URL，并将其放入img src。

如果您想使图像永久化，只需在网址中添加额外的名称/值对，例如storepermanent = yes

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

2 个答案: