小编典典

显示PNG图片作为对jQuery AJAX请求的响应

ajax

是否可以在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标头的图像。


阅读 616

收藏
2020-07-26

共1个答案

小编典典

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

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

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