javascript - 如何将图像数据从node.js传输到html5 canvas？

Question

我正在尝试构建一个演示，它是一个 Node.js C++ 插件。在node.js中，我得到一个ARGB格式的位图，我需要将其传递给html5 Canvas 。我正在尝试找到最有效的方法来做到这一点，因为它非常慢。

目前我执行以下操作:

--- in node.js ---
- Convert ARGB to RGBA (because ImageData accepts that format)
- Create v8::ArrayBuffer (wrapper over the underlying buffer)
- Create v8::Uint8ClampedArray (wrapper over the array buffer)
- Return an object which has the Uint8ClampedArray, width and height

--- in the browser ---
- Get the result from my function
- Create ImageData instance with the specified width and height
- Loop over all bytes in the Uint8ClampedArray and copy them to the image data
- context.putImageData(image_data, 0, 0);

我很确定一定有更优化的方法来做到这一点。以某种方式使插件中的缓冲区保持事件状态不是问题，但我想至少避免将缓冲区逐字节复制到图像数据。

我也不确定为什么如果我尝试使用以 Uint8ClampedArray 作为第一个参数的 ImageData 构造函数会崩溃。在这种情况下，我只是得到: v8::Object::GetAlignedPointerFromInternalField()。错误:不是 Smi

谢谢

Answer 1

您可以使用resterize js在 Canvas 中绑定(bind)数据。我用过这个，即使对于大尺寸的图像，它也能快速工作。