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

Posted 2023-03-24

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

【英文标题】：Is it possible to get pixels from ImageBitMap web object without a canvas?

【发布时间】：2021-09-07 04:41:22

【问题描述】：

我需要在 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 获取数据？但到目前为止找不到任何解决方法。有人对这个愚蠢的问题有聪明的答案吗？

谢谢！

【参考方案1】：

不，目前没有办法。

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

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

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

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

【讨论】：

非常感谢 Kaiido 的详细解答！