在纯JavaScript中将RGBA渲染为PNG？

Question

假设我有一个canvas元素,我需要将画布上的图像转换为PNG或JPEG.当然,我可以简单地使用canvas.toDataURL,但问题是,我需要这个做了二十次一秒钟,canvas.toDataURL是极其缓慢 -缓慢,在拍摄过程中错过帧,因为浏览器是忙于转换成PNG.

我的想法是调用context.getImageData(...),显然更快,并将返回CanvasPixelArray发送给Web Worker,然后Web Worker将原始图像数据处理为PNG或JPEG.问题是我无法canvas.toDataURL从Web Worker中访问本机,因此我需要使用纯JavaScript.我尝试搜索用于Node.js的库,但这些库是用C++编写的.纯JavaScript中是否有任何库可以将原始图像数据呈现为PNG或JPEG？

Answer 1

libpng有几个JavaScript端口,包括pnglets(非常旧),data:demo和PNGlib.

该PNG规范本身是非常简单的-你可能最困难的部分是实现一个简单的PNG编码器自己越来越ZLIB权(对此也有许多独立的JavaScript实现在那里).

Answer 2

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