显示 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 请求中获取带有图像/PNG 标头的图像。

Answer 1

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

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

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

Answer 2

方法一

你不应该进行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>

---

方法二

如果您想发布到该图像并按照您的方式进行操作（尝试在客户端解析图像的内容，您可以尝试以下操作：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中，请参阅How can you encode a string to Base64 in JavaScript?
• 在 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。请参阅 here 和 here。注意支持的浏览器。

Answer 4

感谢以上答案，经过更多搜索后，能够为 Spring Boot 应用程序提出以下解决方案。

HTML

<div class="row">
     <div class="col-11" id='img_div'>
     </div>
</div>

Javascript

function loadImage() {

        $.ajax({
            type: "GET",
            url: contextPath+"/loadImage",
            data: null,
            dataType: 'text',
            cache: false,
            timeout: 600000,
            success: function (data) {
                $('#img_div').html('<img id="img" src="data:image/png;base64,' + data + '" />');
                
            },
            error: function (e) {
                //handle error
            }
        });
    
    }

控制器方法

@GetMapping("/loadImage")
@ResponseBody
private String loadImagefromExternalFolder(HttpServletRequest request){     
    String encodedString = "";
    
    try {       
        RandomAccessFile f =  new RandomAccessFile("C:\\your_folder_path\\your_img.PNG", "r");
        byte[] b = new byte[(int)f.length()];
        f.readFully(b);
        
        encodedString = Base64.getEncoder().encodeToString(b);

    }catch (Exception e) {
        // handle error
    }


    return encodedString;
    
}