javascript - 在纯 JavaScript 中将 RGBA 渲染为 PNG？

Question

假设我有一个canvas元素，我需要将画布上的图像转换为 PNG 或 JPEG。当然，我可以简单地使用canvas.toDataURL，但问题是我需要每秒执行 20 次，而且canvas.toDataURL速度非常慢- 太慢以至于捕获过程会丢失帧，因为浏览器正忙于转换为 PNG。

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

Answer 1

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

PNG 规范本身非常简单——您可能遇到的最困难的部分是自己实现一个简单的 PNG 编码器，就是让ZLIB正确（那里也有许多独立的 JavaScript 实现）。

Answer 2

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

有人做了一个libpng 的端口，你可能想检查一下。

Answer 3

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