javascript - Saving a Uint8Array array storing RGBA to a .png file -

i trying save screenshot of threejs in specific area file.

so far have tried image display new tab, have got work with

window.open(renderer.domelement.todataurl("image/png")); 

renderer three.webglrenderer object preservedrawingbuffer: true

but uses entire scene, have switched to:

    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("data:image/png;base64," + btoa(string.fromcharcode.apply(null, pixels))); 

with doing that, nothing rendered other grey outlined square

if want small part it, rather calling gl.readpixels use source width , height arguments drawimage

var gl = renderer.getcontext();  var ctx = document.createelement('canvas').getcontext("2d");  ctx.canvas.width = width; ctx.canvas.height = height;  ctx.drawimage(gl.canvas, 0, 0, width, height, 0, 0, width, height);  window.open(ctx.canvas.todataurl()); 

there 3 versions of drawimage

1. drawimage(image, dstx, dsty)

2. drawimage(image, dstx, dsty, dstwidth, dstheight)

3. drawimage(image, srcx, srcy, srcwidth, srcheight, dstx, dsty, dstwidth, dstheight)