显示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文件中,我有一个div class="div_imagetranscrits"来填充我的图像.

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

Answer 1

您需要将图像发送回base64编码,请看:http://php.net/manual/en/function.base64-encode.php

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

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

Answer 2

方法1

你不应该进行ajax调用,只需将img元素的src作为图像的url.

如果您使用GET而不是POST,这将非常有用

<script type="text/javascript" > 

  $(document).ready( function() { 
      $('.div_imagetranscrits').html('<img src="get_image_probes_via_ajax.pl?id_project=xxx" />')
  } );

</script>

方法2

如果你想对那个图像进行POST并按照你的方式进行操作(尝试在客户端解析图像的内容,你可以尝试这样的事情:http://en.wikipedia.org/wiki/Data_URI_scheme

你需要编码data到base64,然后你可以放入data:[<MIME-type>][;charset=<encoding>][;base64],<data>img src

例如:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot img" />

要编码到base64:

• 在普通的javascript中,请参阅如何在JavaScript中将字符串编码为Base64？
• 在perl http://perldoc.perl.org/MIME/Base64.html
• 在php http://php.net/manual/en/function.base64-encode.php

Answer 3

这允许您只获取图像数据并设置为img src,这很酷.

var oReq = new XMLHttpRequest();
oReq.open("post", '/somelocation/getmypic', true );        
oReq.responseType = "blob";
oReq.onload = function ( oEvent )
{
    var blob = oReq.response;
    var imgSrc = URL.createObjectURL( blob );                        
    var $img = $( '<img/>', {                
        "alt": "test image",
        "src": imgSrc
    } ).appendTo( $( '#bb_theImageContainer' ) );
    window.URL.revokeObjectURL( imgSrc );
};
oReq.send( null );

基本思想是数据被返回到未被篡改,它被放置在blob中,然后在内存中为该对象创建一个url.看到这里和这里.注意支持的浏览器