哪种格式是从存储在ArrayBuffer中的Kinect中检索到的图像？

问题描述

 

我想从kinect设备中取出图像并将其放入画布中。我知道在SDK示例中，在colorframe示例中有一个非常类似的东西，但是它使用了"webgl"。画布，我想在2D中完成。在这一点上，我有一个
的ArrayBuffer，其中加载了图像中的所有数据，但我不知道如何将ArrayBuffer转换为对我有用的东西。我看到了一些使得转换的主题： 

I want to take the image from the kinect device and put it into a canvas. I know that in the SDK examples there is a very similar thing, in the colorframe example, but it use a "webgl" canvas, and I want to do it in 2D. At this point, I have an ArrayBuffer with all the data from the image loaded, but I don't know how to get that ArrayBuffer converted in something useful to me. I saw some topics which made the conversion like this: 

var arrayBufferView = new Uint8Array(arrayBuffer);
var blob = new Blob([arrayBufferView], { type: "image/bpm" });
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(blob);

var imageElement = new Image();
imageElement.src = imageUrl;
            
bodyContext.drawImage(imageElement, colorCanvas.width, colorCanvas.height);

它似乎有效，但我不知道应采用哪种格式。我尝试过最常见的格式，比如PNG，JPG，GIF ......不是那些有用的。您有什么想法吗？

It seems to work, but I don't know which format should put. I tried the most common formats, like PNG, JPG, GIF... Non of those worked. Do you have any idea? 

推荐答案

您从传感器获取的数据会因帧类型而异，但不会直接映射到用于加载静态图像的图像格式（bmp，jpeg，png）等等）

The data you get from the sensor varies depending on the frame type, but it does not map directly to an image format that you would use to load a static image (bmp, jpeg, png, etc)

例如：颜色框是一个字节数组1920 * 1080 * 4打包R，G，B，A（假设你使用了具有RGBA参数的函数CopyConvertedFrameDataToArray） ） 在ImageHelpers.js中，您可以看到我们正在创建格式为
RGBA的2D纹理：

For example: the Color frame is an array of bytes 1920 * 1080 * 4 packed R,G,B,A (assuming you used the function CopyConvertedFrameDataToArray with the RGBA argument)  In ImageHelpers.js, you can see that we are creating a 2D texture with the format RGBA:

glContext.texImage2D(
    glContext.TEXTURE_2D, 
    0, 
    glContext.RGBA, 
    width, 
    height, 
    0, 
    glContext.RGBA, 
    glContext.UNSIGNED_BYTE, 
    new Uint8Array(imageBuffer));

Depth，IR和BodyIndex 帧是大小为512 * 424的字节数组。 您会注意到这些帧类型的html样本使用winrt组件将帧数据转换为RGBA数组，以便与颜色类似地呈现。

Depth, IR, and BodyIndex frames are byte arrays of size 512 * 424.  You will notice that the html samples for these frame types use a winrt component to convert the frame data to an RGBA array to be rendered similarly to color.

如果要使用html5画布，您可能需要手动设置像素。 获得RGBA数组后，可以使用CreateImageData并设置此缓冲区中的图像数据值：

If you want to use the html5 canvas, you will probably have to set your pixels manually.  Once you get an RGBA array, you can use CreateImageData and set the image data values from this buffer:

http://www.w3schools.com/tags/canvas_createimagedata.asp

不幸的是，这可能很慢。

Unfortunately, this might be slow.

这篇关于哪种格式是从存储在ArrayBuffer中的Kinect中检索到的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！