Display image from HTTP response with image content type

Question

Say I have a url and don't know what it will return. I make an ajax call for this URL with javascript and get the content. So I test its content type and decide how to display the response on my web page. If it is json or html or any other text, I add formatted content as needed.

Now that the content type is an image, I get the image data in a response that is not base64 encoded. Of course, I need to show the image in a regular <img> . And this is where I am stuck.

Is there a way to show an image of content data from it?

EDIT

Just to make it clear, I hear what I get in response:

 " PNG IHDR  Nn tEXtSoftwareAdobe ImageReadyq e<fiTXtXML:com.adobe.xmp<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.0-c060 61.134777, 2010/02/12-17:32:00 "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmpMM:OriginalDocumentID="xmp.did:8E935AD20E206811822AA1DC23D37A5E" xmpMM:DocumentID="xmp.did:606C15E3DC2311E2A81EB553B5E13CE0" xmpMM:InstanceID="xmp.iid:606C15E2DC2311E2A81EB553B5E13CE0" xmp:CreatorTool="Adobe Photoshop CS5 Macintosh"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:0E49679B0D20681192B0DE3AF6794EF0" stRef:documentID="xmp.did:8E935AD20E206811822AA1DC23D37A5E"/> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?> ,   3IDATx 읿R JGI&m     I    ؅K((MC7 nH    %   ef    0   u   i%    : `K { ӷ      u >   (    (    (    (    (    (    (    (    (    (  ((  ((  ((  ((  (   &؅ b1 ϟ׬V  t   j T*  e  R  t     c0 &  |}yy    ns |Cc l   7k     ju: Eٴ    ")Ye  W U Mu+"n     3     zzz*c  %    K g4 & T   z=_    G   @ū ( Rġ ng  ^      @ F   2G_  ],t Fb:     ^      @٨   n F# `    |   <  _!  z   ,  ? p}  U     I}      h 6N  }||$hIY   p^IR?   (k*  D c   )     s *l e n-}  o  f:  Pְ[.  ʚKdP be  !9  ,ʺh  ! r    |    >}  o    λW.  # 5   5IY)Zx 'ʚ4 :88  P  ̫    P֟Z  玍 czeM 51(()  4    0f P 03   A '   Y 5)he xTʚ     |  eQ $ j jF   ~AY ~_      A  `    dOZ =  f  % { }  Qi6     +U,ʚ4N  E  ( J9^s m e  ǜ#bQ6 5 D,  G٘   e  ?~  (?h3    *V    !  -V*   [ڜ ݉,   v     2      Pְ8 PeQ  d0 g.eM I '     }  wˠlb F  | 򤁳     GٝY/..^^^dl   nU0    hv            )m       ec  z yK     ְn淳9      = lT    4 q ''' E)j  6q  b  :  T U   F    % ܈M      ْ   ,  7 6 6 Ŭ   [   !;   7)x 9) /     S *        i  GAJ ~    jMh* j f Y  UV k8  G9r v ^    O    \W 9}^V q `( ʄb)+ 9   IVj  k         K x -֊  Z Pe   h4 L k O8[󮢐*3ާ ; `   b   qAFi (U  \. 񶷞C 6_ ݮo( Ri8   `P  k   P դ& |?Ǒ#   o= V  dĵp K   h IN )%fY I   Ǡ LpWq  v" ʦ  *  4^G4bsn  J7h ^* z     {   V     (+}#    = $ (+ z!H ><<   SJD ¯e   Q6  xAxuu%rx ]v) 4 Y% d rK   z  x  Q  :; h Iu mZ h  bC         F   g וּ B AY  lje Q]Ā\ V y5ʆ  3 rߔ x _qN      h W6t S <??{񅝊{t  h8 l ș:    mE  Q ;Y*{  & `0 x       (V f|  Yˆ   qfH Z  z  i\ S3 LP6 /   h  n      >γ?NP6  2LaA/VP؜q! 2 Q6k U  oWa (  PK  +  V   (ky 0_ g  fIe    *;    t  A?W\) qb  մ lb   * ex ˦y# ir\ 4  bWs :9  ] m     K  = 瘲     _ )  K   O Ќ R6 x Ƽ"J   }Q     )+ ^ ymS       kP  B6蔪 J}   /  ٘ + COo   f 0 1  5OY  {O ێ    Ӫ1Q6  P ޔ 䌬ɑc  :     G >gd   0e  {  ț  L 73LY} wsO  *  t  p fe * \k d f*k5 o Ԭa jUx  F9 6G+e e R n*   0  k  10  v6  $`Vm _w v   pm Y#0  ժ* T6J- j  *U  &   Γ   Z X)kzU` vyW"> 9  | )  ]    F ; e E   *(     ʂg    % }   , ,  , , &   /   Q   0  0e# 0  T* lZ- ~! @R  V5l  j   >Em )p}}mֹ   뫉m= χá  ׁ   ^ g\ e  .b  ߿Y$ U%  v: JX{ up^ 8   ]  @  _  Z  &  t<o{W  T*1 V   +  OOO  Wr        L-        ~ kh J V  ڏR ]  b r   1 Bu_ p    zq W2X$ o }" HYYS.  o  S(RK V+  }\a 7 ; )_   A d  1#Y$vl {  ͭ  !   i    T e X  (  ((  ((  ((  ((  ((  ((  ((  ((  ((  (    (    (    (    (  `/ 0a     IEND B` " 

Answer 1

 var rawResponse = " PNG...."; // truncated for example // convert to Base64 var b64Response = btoa(rawResponse); // create an image var outputImg = document.createElement('img'); outputImg.src = 'data:image/png;base64,'+b64Response; // append it to your page document.body.appendChild(outputImg); 

Answer 2

Depending on the size and composition of the image data:

• use data: URI data: (after performing BASE64 encoding on the client side) or
• use ArrayBuffer along with the canvas tag to create an instance of the image (as soon as you get the canvas with the image, you can leave it as a canvas or export the image in the URI data: .

Some useful links:

ArrayBuffer / Convert ArrayBuffer to Base64

Canvas element / Export canvas to image data: URI

Reading binary data returned by AJAX

Answer 3

I would convert the image to base64 using canvas toDataURL and then add it to the DOM, for example:

 var rawResponse = 'PNG'; // This is your response object var encodedResponse = btoa(rawResponse); var img = new Image(); var container = document.getElementById('newImg'); img.src = 'data:image/gif;base64,' + encodedResponse; img.onload = function() { container.appendChild( img ); }; 

Additional Info About btoa

Answer 4

The accepted answer did not work for me. So here is my solution:

• I use fetch to load the image, so I need to read the answer as blob :

 let data; fetch(url).then(response => { response.blob().then(blobResponse => { data = blobResponse; }) }); 

2. Display blob as images :

 const urlCreator = window.URL || window.webkitURL; document.getElementById('myImage').src = urlCreator.createObjectURL(data);