是否可以在没有画布的情况下从 ImageBitMap Web 对象中获取像素？

Question

我需要在 js 中管理来自网络摄像头的像素。我需要它们为 Uint8ClampedArray 格式。 到目前为止我做到了

this.imageCapture.grabFrame()
        .then(imageBitmap => {
            this.context2d.drawImage(imageBitmap, 0, 0,imageBitmap.width, imageBitmap.height);
        })

然后我得到像素

this.context2d.getImageData(0,0,this._videoCanvas.width,this._videoCanvas.height);

然后我格式化 imageData

我在想可能有办法在不使用画布的情况下从 ImageBitMap 获取数据？但到目前为止找不到任何解决方法。有人对这个愚蠢的问题有聪明的答案吗？

谢谢！

Answer 1

不，目前没有办法。

我们正在努力在 ImageBitmap 接口 specs issue 上添加一个新的 getImageData() 方法，但这仍然需要实现者的兴趣，有人来编写规范，并且可能需要大量的讨论，因为那里的一切都不是那么容易。

（ImageBitmaps 可以表示许多不同的来源，这些来源内部存储在不同的地方，并为回读做出了各种权衡）。

所以目前，唯一的解决方案确实是通过画布。

在不久的将来，可能比ImageBitmap.getImageData 更近，您将能够从您的 MediaStream 中提取 VideoFrames 并将其直接绘制到画布上，如this answer of mine 所示，从而避免 ImageBitmap 步骤，甚至读取 YUV this answer of mine 中演示的每一帧的平面。