Display PNG image as response to jQuery AJAX request

Question

Is it possible to display an image returned by jQuery AJAX call  in the main stream of your HTML   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   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       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   - gt  param  id projet                Create a new image my  image   new GD  Image 985 60     die  my  red     image- gt colorAllocate 255  0  0   my  black     image- gt colorAllocate 0  0  0     image- gt rectangle 0 0 984 59  black    image- gt string gdSmallFont 2 10  Hello  id projet    black     Output the image to the browser  print  cgi - gt  header  -type   gt   image png  -expires   gt   1d       binmode STDOUT   print  image- gt png    Then I have my main script with an AJAX call inside      lt script type  text javascript   gt        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   lt img src      data        gt                 lt  script gt      In my HTML file I have one div with class  div imagetranscrits  to be filled with my image   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

User · Answer

This allows you to just get the image data and set to the img src, which is 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 );

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.

User · Answer

You ll need to send the image back base64 encoded  look at this  http   php net manual en function base64-encode php  Then in your ajax call change the success function to this       div imagetranscrits   html   lt img src  data image png base64     data        gt

User · Answer

Method 1  You should not make an ajax call  just put the src of the img element as the url of the image   This would be useful if you use GET instead of POST   lt script type  text javascript   gt        document  ready  function                div imagetranscrits   html   lt img src  get image probes via ajax pl id project xxx    gt             lt  script gt      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  You ll need to encode the data to base64  then you could put data   lt MIME-type gt    charset  lt encoding gt    base64   lt data gt  into the img src  as example     lt img src  data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4  8 w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg    alt  Red dot img    gt    To encode to base64    in plain javascript  see How can you encode a string to Base64 in JavaScript  in perl http   perldoc perl org MIME Base64 html in php http   php net manual en function base64-encode php

[jquery] Display PNG image as response to jQuery AJAX request

Examples related to jquery

Examples related to ajax

Examples related to image

Examples related to header

Examples related to request