web-dev-qa-db-fra.com

Afficher l'image PNG en réponse à jQuery AJAX

Est-il possible d'afficher une image retournée par jQuery AJAX, dans le flux principal de votre HTML?

J'ai un script qui dessine une image avec un en-tête (image/PNG). Lorsque je l'appelle simplement dans le navigateur, l'image s'affiche.

Mais quand je fais un AJAX appel avec jQuery sur ce script, je ne peux pas afficher une image propre, j'ai quelque chose avec beaucoup de symboles étranges. C'est mon script qui fait l'image avec un en-tête (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;

Ensuite, j'ai mon script principal avec un appel AJAX à l'intérieur:

  <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>

Dans mon fichier HTML, j'ai une div avec class="div_imagetranscrits" à remplir avec mon image.

Je ne vois pas ce que je fais mal. L'autre solution est de faire en sorte que mon script écrive l'image sur le disque et d'obtenir simplement le chemin à inclure dans le src pour l'afficher. Mais je pensais qu'il était possible d'obtenir l'image avec un en-tête image/PNG directement à partir d'une demande AJAX.

jqueryajaximageheaderrequest
28
ZheFrench

Vous devrez renvoyer l'image encodée en base64, regardez ceci: http://php.net/manual/en/function.base64-encode.php

Ensuite, dans votre appel ajax, changez la fonction de réussite en ceci:

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

Méthode 1

Vous ne devriez pas faire un appel ajax, mettez simplement le src de l'élément img en tant qu'url de l'image.

Cela serait utile si vous utilisez GET au lieu de POST

<script type="text/javascript" > 

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

</script>

Méthode 2

Si vous voulez POST sur cette image et le faire comme vous le faites (en essayant d'analyser le contenu de l'image côté client, vous pouvez essayer quelque chose comme ceci: http : //en.wikipedia.org/wiki/Data_URI_scheme

Vous devrez encoder le data en base64, puis vous pourriez mettre data:[<MIME-type>][;charset=<encoding>][;base64],<data> dans l'img src

comme exemple:

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

Pour encoder en base64:

20
jperelli

Cela vous permet d'obtenir simplement les données d'image et de les définir sur img src, ce qui est cool.

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 );

L'idée de base est que les données sont renvoyées sans être altérées, elles sont placées dans un blob puis une URL est créée pour cet objet en mémoire. Voir ici et ici . Notez les navigateurs pris en charge.

7
acarlon