title: Saving a Uint8Array array storing RGBA to a .png file
body: <p>I am currently trying to save a screenshot of a ThreeJS in a specific area to file.</p>
  <p>So far I have only tried to get the image to display into a new tab, I have got it to work with</p>
  <pre><code>window.open(renderer.domElement.toDataURL(&quot;image/png&quot;));
  </code></pre>
  <p>renderer is a THREE.WebGLRenderer object with preserveDrawingBuffer: true</p>
  <p>But that uses the entire scene, so I have switched to:</p>
  <pre><code>    var gl = renderer.getContext();
      var pixels = new Uint8Array(width * height * 4);
      gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
      window.open(&quot;data:image/png;base64,&quot; + btoa(String.fromCharCode.apply(null, pixels)));
  </code></pre>
  <p>With doing that, nothing is rendered other then a grey outlined square</p>
  <p><a href="https://i.stack.imgur.com/Zk4tv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zk4tv.png" alt="outlined grey square" /></a></p>