Reading image bytes to a PNG in a typed array

Having a texture in WebGL and wanting to encode it into a typed array as
PNG, I have found that the only way to do it is the following convoluted

1) Create canvas, set to desired size
2) Create 2D context
3) Create imageData object
4) Create a WebGL framebuffer object
5) Attach texture as color target to framebuffer
6) read back pixels into canvas2d's member
7) ctx.putImageData into the canvas
8) call canvases toDataURL('image/png')
9) snip off the mime/encoding header
10) implement base64 decode in JS and decode to Uint8Array

This process does not strike me as a terribly good way to do it because it
is both entirely sync as well as inefficient.

There are two parts that could be improved a lot, the first part is how to
get bytes out of webgl but this is not what I want to discuss here. The
second part is how to encode image bytes to an image, which I'd like to
present a suggestion for.

Steps 1,2,3,7,8,9 and 10 could be immensely simplified, made asynchronous
and made efficient by the following straightforward function:

encodePNG(inputDataBufferView, width, height, targetBufferView, onDone,

The callback on onDone would be called with the size written to the

Received on Monday, 14 January 2013 12:21:26 UTC