title: Embedding PNG files that are retrieved by sending post data to a URL
body: <p>I've searched for this answer in the past but have never come across an answer for this problem. I'm hoping the SO community can finally put this question to rest. <strong>I need to know how to embed an image whose source bytes are retrieved via a POST request in JavaScript/ JQuery.</strong> POST is needed because in order to generate the image the server needs to be sent a base64 encoded string of instructions from the client. Sometimes those instructions are too lengthy to be sent via GET. Also, I'm working with some legacy code right now, so I'm trying to avoid changing major functions of the server code. It's still sth that is possible to do, just not preferred as editing server code won't always be an option in future situations.</p>
  
  <p>I know you can embed base64 in an img tag. I know you can also do it by rendering the data on a canvas. But both of those methods require you either have an <strong>encoded base64 string</strong>... </p>
  
  <p><code>&lt;img src='data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0.....AwXEQA7'&gt;</code></p>
  
  <p><strong>A standard URL...</strong></p>
  
  <p><code>&lt;img src="www.examplesite.com/theimage.png"&gt;</code></p>
  
  <p><strong>Or a URL that uses GET parameters.</strong> </p>
  
  <p><code>&lt;img src="www.examplesite.com/getImage.php?id=9001"&gt;</code></p>
  
  <p><strong>What about a URL that uses POST parameters?</strong></p>
  
  <pre><code>&lt;script&gt;
  var url = 'www.examplesite.com/getImage.php';
  var postData = {'id': 9001};
  var outDiv = document.getElementById("outputDiv");
  $.post(url,postData,function(data){
  
      // What do we do here to display the returned image?
      // The image will have the Content-Type: 'image/png'.
  
  });
  &lt;/script&gt;
  </code></pre>