CODEWITHSUNDEEP
c#wpfimagebitmapoverlay
Brian Var
Brian Var

Reputation: 6227

How to draw/overlay an image file to a bitmap image?

I have a video feed from a Kinect sensor hosted by an image stored as a bitmap. My question is how do I overlay an image, for example a .png on to the video feed.

The video feed is shown like show below as bitmap source, I know how to draw a line to the bitmap but how do I draw an image from resources to the it?

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

Below is a mock up of what I'm trying to achieve by placing the image over the video feed:

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

Updated implementation of drawing method,I don't think this is the correct implementation also I'm getting invalid argument error when adding image path to .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; 


            }
        }

Upvotes: 3

Views: 8103

Answers (2)

dkozl
dkozl

Reputation: 33364

To create merged image you can use DrawingContext that gives you methods like DrawText or DrawImage and then render it using 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;

Upvotes: 5

Sheridan
Sheridan

Reputation: 69959

If you just want display an Image on top of another UI control, then you can either just declare one after the other UI elements, or set the Panel.ZIndex property:

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

Or:

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

To find out how to data bind a BitmapImage to an Image.ItemsSource property, please see the Bind Xaml bitmap image question here on StackOverflow. To position the Image in a specific place, you can either use the Image.Margin property or put it in a Canvas and use the Canvas.Left and Canvas.Top properties.

Upvotes: 1

Related Questions