Mostrar imagen PNG como respuesta a la solicitud jQuery AJAX

¿Es posible mostrar una imagen devuelta por jQuery AJAX call, en la transmisión principal de su HTML?

Tengo un script que dibuja una imagen con un encabezado (image / PNG). Cuando simplemente lo llamo en el navegador, se muestra la imagen.

Pero cuando hago una llamada AJAX con jQuery en este script, no puedo mostrar una imagen limpia, tengo algo con muchos símbolos extraños. Este es mi script que crea la imagen con un encabezado (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; 

Luego tengo mi script principal con una llamada AJAX dentro:

   $(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(''); }, } );  

En mi archivo HTML tengo un div con class="div_imagetranscrits" para rellenar con mi imagen.

No veo lo que estoy haciendo mal. La otra solución es hacer que mi script escriba la imagen en el disco y simplemente obtener la ruta para incluirla en el src para mostrarla. Pero estaba pensando que era posible obtener la imagen con un encabezado de imagen / PNG directamente desde una solicitud de AJAX.

Necesitará enviar la imagen de vuelta base64 codificada, mire esto: http://php.net/manual/en/function.base64-encode.php

Luego, en su llamada ajax, cambie la función de éxito a esto:

 $('.div_imagetranscrits').html(''); 

Método 1

No debe hacer una llamada ajax, solo ponga el src del elemento img como la url de la imagen.

Esto sería útil si usa GET en lugar de POST

  

Método 2

Si desea enviar a esa imagen y hacerlo de la manera que lo hace (tratando de analizar el contenido de la imagen en el lado del cliente, podría intentar algo como esto: http://en.wikipedia.org/wiki/Data_URI_scheme

Necesitará codificar los data a base64, luego podría poner los data:[][;charset=][;base64], en el src de img

como ejemplo:

 Red dot img 

Para codificar a base64:

Esto le permite obtener los datos de la imagen y establecerlos en img src, lo cual es genial.

 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 = $( '', { "alt": "test image", "src": imgSrc } ).appendTo( $( '#bb_theImageContainer' ) ); window.URL.revokeObjectURL( imgSrc ); }; oReq.send( null ); 

La idea básica es que los datos se devuelven sin moderar, se colocan en un blob y luego se crea una url para ese objeto en la memoria. Mira aquí y aquí . Tenga en cuenta los navegadores compatibles.