在纯JavaScript中将RGBA渲染为PNG？

Question

假设我有一个canvas元素，我需要将画布上的图像转换为PNG或JPEG。当然，我可以简单地使用canvas.toDataURL，但问题是我需要每秒执行二十次，canvas.toDataURL是extremely slow - 这么慢以至于捕获过程未命中帧，因为浏览器正忙于转换为PNG。

我的想法是调用context.getImageData(...)，显然速度要快得多，然后将返回的CanvasPixelArray发送给Web Worker，然后Web Worker将原始图像数据处理为PNG或JPEG。问题是我无法从Web Worker中访问本机canvas.toDataURL，因此我需要使用纯JavaScript。我尝试搜索用于Node.js的库，但those是用C ++编写的。纯JavaScript中是否存在将原始图像数据呈现为PNG或JPEG的库？

Answer 1

libpng有几个JavaScript端口，包括pnglets（非常旧），data:demo和PNGlib。

PNG spec本身非常简单 - 您可能遇到的最困难的部分就是自己实现一个简单的PNG编码器正确ZLIB（其中还有许多独立的JavaScript实现）

Answer 2

实际上有一个名为Emscripten的C ++到JavaScript编译器。

有人制作了port of libpng，您可能需要查看。

Answer 3

我能够编写自己的PNG编码器，它支持RGB和调色板，具体取决于颜色的颜色。它旨在作为Web Worker运行。我将其开源为usain-png。