在纯 JavaScript 中将 RGBA 渲染为 PNG？答案

【问题标题】：Render RGBA to PNG in pure JavaScript?在纯 JavaScript 中将 RGBA 渲染为 PNG？
【发布时间】：2012-12-01 04:03:07
【问题描述】：

假设我有一个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？

【问题讨论】：

所以它不能运行服务器端？
@madflow 它需要将所有数据发送到服务器，并且由于数据量很大（每秒 20 帧，持续几分钟），这并不理想。
好的。如果您必须回退到服务器解决方案 - 还有 phantomjs (phantomjs.org) 是为此类任务设计的（据我所知）。抱歉 - 据我所知，没有纯 Javascript 解决方案。
将原始像素数据发送到您的服务器并将其转换为您需要的任何类型的图像不是更容易吗？如果 toDataURL 很慢，我想用纯 JS 将内容转换为 PNG 会更慢...
@GGG 但关键是使用 Web Workers，用户不会体验到缓慢的情况。

标签： javascript canvas html5-canvas web-worker

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

实际上有一个 C++ 到 JavaScript 的编译器，叫做 Emscripten。

有人发了port of libpng，您可能想检查一下。

【讨论】：

【解决方案3】：

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

【讨论】：

我尝试将它与 nodejs 一起使用（在服务器端），但它非常非常慢......我在这里发布了我的问题：stackoverflow.com/questions/13648633/…。你有什么想法可能会有所帮助吗？非常感谢。