Afficher L'image PNG en réponse à la demande jQuery AJAX
est-il possible d'afficher une image retournée par jQuery AJAX call, dans le flux principal de votre HTML?
j'ai un script qui dessine une image avec un en-tête (image/PNG). Quand je l'appelons tout simplement dans le navigateur, l'image est affichée.
mais quand je fais un appel AJAX avec jQuery sur ce script, Je ne peux pas afficher une image nette, 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;
puis 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 de mal. L'autre solution est de faire que mon script écrive l'image sur le disque et juste obtenir 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'un AJAX demande.
3 réponses
vous aurez besoin de renvoyer l'image base64 encodé, Regardez ceci: http://php.net/manual/en/function.base64-encode.php
puis dans votre appel ajax changer la fonction de succès à ceci:
$('.div_imagetranscrits').html('<img src="data:image/png;base64,' + data + '" />');
Méthode 1
vous ne devez pas faire d'appel ajax, il suffit de mettre le src de l'élément img comme url de l'image.
ce 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 poster sur cette image et le faire comme vous le faites (en essayant d'analyser le contenu de l'image du côté du client, vous pouvez essayer quelque chose comme ceci: http://en.wikipedia.org/wiki/Data_URI_scheme
vous aurez besoin d'encoder le data pour base64, alors 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 coder base64:
- en clair javascript, voir Comment Pouvez-vous encoder une chaîne de caractères à Base64 en JavaScript?
- en perl http://perldoc.perl.org/MIME/Base64.html
- en php http://php.net/manual/en/function.base64-encode.php
cela vous permet de simplement obtenir les données d'image et de définir à l'img src, 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 retournées ne sont pas empilées avec, il est placé dans un blob et puis une url est créée à cet objet en mémoire. Voir ici et ici . Note navigateurs pris en charge.