Overlaying/merging Images in WPF

Question

5.00/5 (2 votes)

See more:

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?

C#

public static void Overlay(ImageSource first, ImageSource second)
  {

   ((BitmapFrame)first).Decoder.ToString();

   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,

Jib

Posted 17-Aug-11 23:11pm

Jibrohni

Updated 18-Aug-11 2:57am

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

TheyCallMeMrJames · Answer 1 · 2011-08-18T04:02:00

Solution 1

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.

Cheers.

Posted 18-Aug-11 4:02am

TheyCallMeMrJames

Comments

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);
rtb1.Render(dVis1);
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);
rtb2.Render(dVis2);
BitmapFrame frame2 = BitmapFrame.Create(rtb2);

BitmapEncoder encoder = new PngBitmapEncoder();
encoder.Frames.Add(frame1);
encoder.Frames.Add(frame2);

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

}

Andrew Rissing · Answer 2 · 2011-08-18T04:03:00

Solution 2

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).

Posted 18-Aug-11 4:03am

Andrew Rissing

Comments

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.