title: How can I create a PNG blob from binary data in a typed array?
body: <p>I have some binary data that happens to be a PNG. I'd like turn it into a blob, get a URL for the blob and display it as an image (or any places else an image URL is valid like css etc..)</p>
  
  <p>Here's what I tried. First I made a small 8x8 red square with yellow "F" image and used pngcrush to make it smaller</p>
  
  <p>You can see the original 91 byte image displays just fine (it's only 8x8 pixels)</p>
  
  <p><img src="https://greggman.github.io/doodles/assets/tiny-crush.png" alt="91 byte png"></p>
  
  <p>Then, for this sample, I converted that to an JavaScript array, I copy it into a Uint8Array, I make a blob from that and a URL from the blob, assign that to an image but the image does not display.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data = new Uint8Array([
    137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,8,0,0,
    0,8,8,2,0,0,0,75,109,41,220,0,0,0,34,73,68,65,84,8,215,99,120,
    173,168,135,21,49,0,241,255,15,90,104,8,33,129,83,7,97,163,136,
    214,129,93,2,43,2,0,181,31,90,179,225,252,176,37,0,0,0,0,73,69,
    78,68,174,66,96,130]);
  var blob = new Blob(data, { type: "image/png" });
  var url = URL.createObjectURL(blob);
  var img = new Image();
  img.src = url;
  console.log("data length: " + data.length);
  document.body.appendChild(img);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img { width: 100px; height: 100px; }</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I get it to display as a blob url?</p>