Click here to Skip to main content
14,695,085 members
Please Sign up or sign in to vote.
5.00/5 (2 votes)
Hi all,

I have two images on my form, one is a .jpg the other is a .png. What I'm doing is overlaying them to try and create one image that I can then save to a file. I've done a lot of searching on the net but can't seem to find a simple way to do it. I've got the code below which I think has amalgamated the two images into MyImage. How can I then save this to a .jpg file?

Alternativelyy, does anyone know of a nice easy way to do this?

public static void Overlay(ImageSource first, ImageSource second)


   var group = new DrawingGroup();
   group.Children.Add(new ImageDrawing(new BitmapImage(new Uri(((BitmapFrame)first).Decoder.ToString(), UriKind.Absolute)), 
    new Rect(0, 0, first.Width, first.Height)));
   group.Children.Add(new ImageDrawing(new BitmapImage(new Uri(((BitmapFrame)second).Decoder.ToString(), UriKind.Absolute)),
    new Rect(0, 0, first.Width, first.Height)));

   Image MyImage = new Image();
   MyImage.Source = new DrawingImage(group);


Thanks all,

Updated 18-Aug-11 3:57am

You'll want to cast the image to a Bitmap and then save the file out - there's a Save() method for you on the object.

Bob Powell[^] has a ton of info on image manipulation that you will find very helpful. A simple scan of his work will find you several ways to do this.

Jibrohni 18-Aug-11 12:59pm
I've got the following code that I thought would overlay the .jpg and .png, but it's just outputting a black image. Can anyone tell me how to fix this?

public static void Overlay(Image first, Image second)
DrawingVisual dVis1 = new DrawingVisual();
DrawingContext drawingContext1 = dVis1.RenderOpen();
drawingContext1.DrawImage(first.Source, new Rect(0, 0, first.Width, second.Height));
RenderTargetBitmap rtb1 = new RenderTargetBitmap((int)first.ActualWidth, (int)first.ActualHeight, 96, 96, PixelFormats.Pbgra32);
BitmapFrame frame1 = BitmapFrame.Create(rtb1);

DrawingVisual dVis2 = new DrawingVisual();
DrawingContext drawingContext2 = dVis2.RenderOpen();
drawingContext2.DrawImage(second.Source, new Rect(0, 0, first.Width, second.Height));
RenderTargetBitmap rtb2 = new RenderTargetBitmap((int)first.ActualWidth, (int)first.ActualHeight, 96, 96, PixelFormats.Pbgra32);
BitmapFrame frame2 = BitmapFrame.Create(rtb2);

BitmapEncoder encoder = new PngBitmapEncoder();

//Image newImage = new Image();
//newImage.Source = rtb;
using (var stream = File.Create(@"C:\Users\Jibrohni\Documents\Visual Studio 2010\Projects\LayerImages\Images\newImage.png"))

It depends on what exactly you're trying to do. You can try placing the images over each other and adjusting the opacity of the top image to show the image below (this would be similar to applying a watermark).
Jibrohni 20-Aug-11 6:13am
No, I've done that already within my form, but I then wish to save that resultant image as on jpg.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900