jquery - 显示 PNG 图像作为对 jQuery AJAX 请求的响应

Question

是否可以在 HTML 的主流中显示 jQuery AJAX 调用返回的图像？

我有一个脚本，可以绘制带有标题的图像(图像/PNG)。当我简单地在浏览器中调用它时，就会显示图像。

但是当我在这个脚本上使用 jQuery 进行 AJAX 调用时，我无法显示干净的图像，我有一些带有很多奇怪符号的东西。这是我的脚本，它制作带有标题的图像(图像/PNG)。

#!/usr/bin/perl 

use strict;
use CGI;
use Template;
use CGI::Carp qw(fatalsToBrowser);
use lib qw(lib);
use GD;

my $cgi    = new CGI;

my $id_projet            =  $cgi   -> param('id_projet') ;      # 

# Create a new image
my $image = new GD::Image(985,60) || die;
my $red =  $image->colorAllocate(255, 0, 0);
my $black =  $image->colorAllocate(0, 0, 0);

$image->rectangle(0,0,984,59,$black);
$image->string(gdSmallFont,2,10,"Hello $id_projet ",$black);
# Output the image to the browser

print $cgi -> header({-type => 'image/png',-expires => '1d'});

#binmode STDOUT;

print $image->png;

然后我的主脚本中包含 AJAX 调用:

  <script type="text/javascript" > 

  $(document).ready( function() { 

  $.ajax({
  type: "POST",
  url:'get_image_probes_via_ajax.pl',
  contentType: "image/png",
  data: "id_projet=[% visual.projet.id %]",
  success: function(data){
  $('.div_imagetranscrits').html('<img src="' + data + '" />'); },
 } );

 </script>  

在我的 HTML 文件中，我有一个带有 class="div_imagetranscrits" 的 div 来填充我的图像。

我不明白我做错了什么。另一个解决方案是让我的脚本将图像写入磁盘上，然后获取包含在 src 中的路径来显示它。但我认为可以直接从 AJAX 请求获取带有 image/PNG header 的图像。

Answer 1

您需要将图像以 Base64 编码发回，看一下:http://php.net/manual/en/function.base64-encode.php

然后在你的ajax调用中将成功函数更改为:

$('.div_imagetranscrits').html('<img src="data:image/png;base64,' + data + '" />');