通过ajax显示生成的图像

Question

我有可以写文字的表格。我希望在图像上生成此文本。我有它并且它有效，我是using imagepng($im)。问题是我需要打印该图像，并有一个“打印”按钮。因为header('Content-Type: image/png') 我不能在我生成它的页面上使用html，所以我想使用ajax。这是我的实际代码，很少混合，我尝试了一些 base64 但从未使用过它，但我失败了。实际上，我的代码甚至没有显示错误（使用数据类型 json 显示）。我真的不知道该怎么做。哪里都没有找到。请帮助我不知道该怎么办;_;

代码：

<script type="text/javascript">
jQuery(function($) {
 $(document).ready(function()
 {
  $( "#form_formularz" ).submit(function(e)
  {
   var data=JSON.stringify($('form').serialize())
   e.preventDefault();
   $.ajax({

    type: 'post',
    url: 'http://example.com/transfer_generator.php',
    data: data,
    error: function(a,b){console.log(a);console.log(b)},
    success: function(cbdata){
      console.log(data);
      console.log(cbdata);
      $('#form_image').html('<img src="data:image/png;base64,' + cbdata + '" />');
    }
   });
  });
 });
});
</script>
<div id="form_image">
</div>

编辑： 将“succes”更改为“success”并在 success: function(){ 中添加了cbdata

有'

// Set the content-type
header('Content-Type: image/png');

// Create the image
$im = ImageCreateFromPNG( "image.png" );

/* adding some text, everything okay */

imagepng($im);

我尝试添加 echo 'base64_encode(imagepng($im));'但没有为此工作。

Answer 1

您的代码中有两个错误。在进一步调试之前修复这些问题。

1. success 方法拼写错误。

2. success 方法没有 cbdata 参数。你在哪里声明这个？

尝试以下方法：

...
    success: function(cbdata){
      console.log(data);
      console.log(cbdata);
      $('#form_image').html('<img src="data:image/png;base64,' + cbdata + '" />');
    }
...

编辑：响应您的编辑，在您的 PHP 文件中执行以下操作：

1. 删除header 语句。

2. 您需要发回 base64 编码图像的字符串内容。像这样的：

   $fileName = 'my-temp-image.png';
   imagepng($im, $fileName);
   imagedestroy($im);
   $base64Image = base64_encode(file_get_contents($fileName));
   unlink($fileName);
   echo $base64Image;