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

Is it possible to display an image returned by jQuery AJAX call, in the main stream of your HTML?

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

I have a script that draws an image with a header (image/PNG). When I simply call it in the browser, the image is displayed.

我有一个用头(image/PNG)绘制图像的脚本。当我在浏览器中调用它时，图像就会显示出来。

But when I make an AJAX call with jQuery on this script, I can't display a clean image, I have something with a lot of strange symbols. This is my script that makes the image with a header (image/PNG).

但是当我在这个脚本上使用jQuery进行AJAX调用时，我不能显示干净的图像，因为我有很多奇怪的符号。这是我的脚本，它使用头(image/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;

Then I have my main script with an AJAX call inside:

然后我有了我的主脚本，里面有一个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>  

In my HTML file I have one div with class="div_imagetranscrits" to be filled with my image.

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

I don't see what I'm doing wrong. The other solution is to make my script write the image on disk and just get the path to include in the src to display it. But I was thinking it was possible to get the image with an image/PNG header directly from an AJAX request.

我不知道我做错了什么。另一种解决方案是让我的脚本在磁盘上编写映像，并在src中获取显示映像的路径。但是我认为可以从AJAX请求中直接获得带有图像/PNG头的图像。

3 个解决方案

#1

You'll need to send the image back base64 encoded, look at this: http://php.net/manual/en/function.base64-encode.php

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

Then in your ajax call change the success function to this:

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

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

#2

Method 1

You should not make an ajax call, just put the src of the img element as the url of the image.

您不应该进行ajax调用，只需将img元素的src作为图像的url。

This would be useful if you use GET instead of POST

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

<script type="text/javascript" > 

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

</script>

---

Method 2

If you want to POST to that image and do it the way you do (trying to parse the contents of the image on the client side, you could try something like this: http://en.wikipedia.org/wiki/Data_URI_scheme

如果您希望发布到该映像并按照您的方式(尝试解析客户端上的映像内容)，您可以尝试以下操作:http://en.wikipedia.org/wiki/Data_URI_scheme

You'll need to encode the data to base64, then you could put data:[<MIME-type>][;charset=<encoding>][;base64],<data> into the img src

您需要将数据编码到base64，然后您可以将数据:[< mi -type>][;charset= ][;base64]， into img src

as example:

为例:

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

To encode to base64:

base64编码:

• in plain javascript, see How can you encode a string to Base64 in JavaScript?
• 在普通javascript中，如何用javascript将字符串编码为Base64 ?
• in perl http://perldoc.perl.org/MIME/Base64.html
• 在perl中http://perldoc.perl.org/MIME/Base64.html
• in php http://php.net/manual/en/function.base64-encode.php
• 在php中http://php.net/manual/en/function.base64-encode.php

#3

This allows you to just get the image data and set to the img src, which is cool.

这允许您获取图像数据并将其设置为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 );

The basic idea is that the data is returned untampered with, it is placed in a blob and then a url is created to that object in memory. See here and here. Note supported browsers.

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