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

Question

我使用 PHP GD 库创建了一个 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));
});

Answer 2

您不需要 json 或 XHR ('ajax')。

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

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

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

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