title: Creating a PNG from uncompressed raw PNG data
body: <p>I am using this <a href="https://github.com/iyouq/android-screenshot-library/blob/master/native/fbshot.c" rel="nofollow">Android Screenshot Library</a> to capture screenshots. I want to show this screenshot in web browser.</p>
  
  <p>I have written a small socket app on PC which connects to Android phone and encode the captured screenshot to base64. </p>
  
  <pre><code>String base64 = Base64.getEncoder().encodeToString(bytes);
  </code></pre>
  
  <p>This base64 is being sent to web page over websocket. Below is my html/JS code which should draw the image on canvas. I have stored the base64 image data in a text file for test purpose.</p>
  
  <pre><code>&lt;div style="background: aqua; width: 500px; height: 660px;"&gt;
  
      &lt;canvas style="width: 480px; height: 640px;" id="sim"&gt;
      &lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      var ctx;
      var width = 480;
      var height = 640;
  
      (function start() {
          ctx = document.getElementById("sim").getContext("2d");
          loadFromFile();
      })();
  
      function loadImage(data) {
  
          var image = new Image();
          image.onload = function() {
              //this part never executes
              ctx.drawImage(image, 0, 0);
              console.log("images loaded!");
          }
  
          image.src = "data:image/png;base64," + data;
      }
  
      function loadFromFile() {
          //please get data from **https://app.box.com/s/e19ww51fd37h4sy8getjnag31ud6tpp9**
          var file = "imagefile.txt";
  
          var rawFile = new XMLHttpRequest();
          rawFile.open("GET", file, true);
  
          rawFile.onreadystatechange = function() {
              if (rawFile.readyState === 4) {
                  if (rawFile.status === 200 || rawFile.status == 0) {
                      var data = rawFile.responseText;
                      console.log("data loaded: " + data.length);
  
                      loadImage(data);
                  }
              }
          }
          rawFile.send(null);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>For convenience, here is the <a href="http://jsfiddle.net/amebgfvk/" rel="nofollow">JsFiddle</a> of same code.</p>
  
  <p>Please point to right algorithm as how to generate the PNG from the raw uncompressed data. code sample would be great ;) </p>
  
  <p>Thanks</p>