title: Render RGBA to PNG in pure JavaScript?
body: <p>Let's say I have a <code>canvas</code> element, and I need to turn the image on the canvas into a PNG or JPEG. Of course, I can simply use <code>canvas.toDataURL</code>, but the problem is that I need to do this a twenty times a second, and <code>canvas.toDataURL</code> is <a href="http://jsperf.com/canvas-todataurl-imagetype-performance/9">extremely slow</a> -- so slow that the capturing process misses frames because the browser is busy converting to PNG.</p>
  
  <p>My idea is to call <code>context.getImageData(...)</code>, which evidently is much faster, and send the returned <code>CanvasPixelArray</code> to a Web Worker, which will then process the raw image data into a PNG or JPEG. The problem is that I can't access the native <code>canvas.toDataURL</code> from within the Web Worker, so instead, I'll need to resort to pure JavaScript. I tried searching for libraries intended for Node.js, but <a href="https://github.com/pkrumins/node-png">those</a> are written in C++. Are there any libraries in pure JavaScript that will render raw image data into a PNG or JPEG?</p>