如何将图像文件绘制/覆盖到位图图像？答案

【问题标题】：How to draw/overlay an image file to a bitmap image?如何将图像文件绘制/覆盖到位图图像？
【发布时间】：2014-03-21 20:41:43
【问题描述】：

我有一个来自 Kinect 传感器的视频源，它由存储为位图的图像托管。我的问题是如何在视频源上叠加图像，例如 .png。

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

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

下面是我试图通过将图像放在视频源上来实现的模拟：

更新了绘图方法的实现，我认为这不是正确的实现，我在将图像路径添加到.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; 


            }
        }

【问题讨论】：

标签： c# wpf image bitmap overlay

【解决方案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;

【讨论】：

好的，所以我把这段代码放在我的视频源之后并设置drawingContext.DrawImage(KinectVideo, destRect1); 和drawingContext.DrawImage(PunchBag, destRect1); 这会将图像绘制到提要上还是我弄错了？
好的，我尝试了更新的代码，但这行让我感到困惑，`drawingContext.DrawImage("Images/bbag.jpg", destRect2);`什么是destRect2，我是否也必须声明它图像的路径是图像 2 的正确参数吗？
绘制bitmapSource的区域。 msdn.microsoft.com/en-us/library/ms606804(v=vs.110).aspx 这意味着您可以在目标中的任何位置绘制它，并且可能只是从顶部/左侧开始绘制它的一部分。将 X/Y 设置为您想要的位置，宽度/高度以匹配您的叠加图像尺寸。
根据我的回答，@dkozl 和其他回答者我认为您有很多方法可以解决您的问题。如果您仍然无法正确解决问题，请更新您的问题，但这次使用代码块，而不仅仅是 1 行代码。
这就是我要写的，你不能把图像的路径，你需要从它创建一个BitmapImage。

【解决方案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 属性。

【讨论】：