Question

我有一个Kinect传感器的视频输入，该传感器由存储为位图的图像托管。我的问题是如何将图片叠加到视频Feed上，例如.png。

视频输入显示如下所示为位图源，我知道如何在位图上绘制一条线但是如何从资源中将图像绘制到它？

KinectVideo.Source = BitmapSource.Create(colorFrame.Width, colorFrame.Height, 96, 96,
                    PixelFormats.Bgr32, null, colorData, colorFrame.Width * colorFrame.BytesPerPixel);

下面是通过将图像放在视频Feed上来模拟我想要实现的目标：

The boxing bag is the image I want to overlay to the video feed.

更新了绘图方法的实现，我不认为这是正确的实现我在将图像路径添加到.DrawImage时收到无效参数错误：

void myKinect_ColorFrameReady(object sender, ColorImageFrameReadyEventArgs e)
        {
            using (ColorImageFrame colorFrame = e.OpenColorImageFrame())
            {

                if (colorFrame == null) return;
                byte[] colorData = new byte[colorFrame.PixelDataLength];
                colorFrame.CopyPixelDataTo(colorData);

                 KinectVideo.Source = BitmapSource.Create(colorFrame.Width, colorFrame.Height, 96, 96,
                    PixelFormats.Bgr32, null, colorData, colorFrame.Width * colorFrame.BytesPerPixel);

                Rect destRect2;

               //drawing image overlay to video feed
                 var drawingVisual = new DrawingVisual();
                 var drawingContext = drawingVisual.RenderOpen();
                 drawingContext.DrawImage(BitmapSource.Create(colorFrame.Width, colorFrame.Height, 96, 96, PixelFormats.Bgr32, null, colorData, colorFrame.Width * colorFrame.BytesPerPixel),
                                           new Rect(new Size(colorFrame.Width, colorFrame.Height)));
                 drawingContext.DrawImage("Images/boxbag.jpg", destRect2);
                 drawingContext.Close();
                 var mergedImage = new RenderTargetBitmap(colorFrame.Width, colorFrame.Height, 96, 96, PixelFormats.Pbgra32);
                 mergedImage.Render(drawingVisual);

                 KinectVideo.Source = mergedImage; 


            }
        }

Answer 1

要创建合并图片，您可以使用DrawingContext为DrawText或DrawImage提供方法，然后使用RenderTargetBitmap.Render进行渲染：

var drawingVisual = new DrawingVisual();
var drawingContext = drawingVisual.RenderOpen();
drawingContext.DrawImage(BitmapSource.Create(colorFrame.Width, colorFrame.Height, 96, 96, PixelFormats.Bgr32, null, colorData, colorFrame.Width * colorFrame.BytesPerPixel), 
                          new Rect(new Size(colorFrame.Width, colorFrame.Height)));
var overlayImage = new BitmapImage(new Uri("Images/boxbag.jpg"));
drawingContext.DrawImage(overlayImage, 
                          new Rect(x, y, overlayImage.Width, overlayImage.Height));
drawingContext.Close();
var mergedImage = new RenderTargetBitmap(colorFrame.Width, colorFrame.Height, 96, 96, PixelFormats.Pbgra32);
mergedImage.Render(drawingVisual);

KinectVideo.Source = mergedImage;

Answer 2

如果您只想在另一个UI控件上显示Image，那么您可以在其他UI元素之后声明一个，或者设置Panel.ZIndex属性：

<Grid> <Border Background="Black" /> <Image Source="/AppName;component/Images/ImageName.jpg" Width="50" Height="50" /> </Grid>

或者：

<Grid> <Image Source="/AppName;component/Images/ImageName.jpg" Width="50" Height="50" Panel.ZIndex="1" /> <Border Background="Black" /> </Grid>

要了解如何将BitmapImage数据绑定到Image.ItemsSource属性，请参阅StackOverflow上的Bind Xaml bitmap image问题。要将Image置于特定位置，您可以使用Image.Margin属性或将其放在Canvas中，然后使用Canvas.Left和Canvas.Top属性。

如何将图像文件绘制/叠加到位图图像？

2 个答案: