How do I overlay an image in .NET

Question

I have a .png image i wish to overlay on a base image.

My overlay image contains just a red slant line. I need to get the red line overlayed on the base image at the same co-ordinate as it is in overlay image.

The problem is I do not have the co-ordinates location.

I need to find it programmatically with C#. The overlay image will always be transparent or of white background. What code to find the line co-ordinates from overlay image?

What is "same coordinate"? Perhaps some illustrations will make it clearer. — Alvin Wong, Oct 25 '12 at 12:21
If in overlay image my line starts from 20,20 and ends at 120,50 then i need the line to appear in my base image at 20,20 and ending at 120,50. — Gayatri, Oct 25 '12 at 13:05

score 18 · Answer 1 · answered Oct 25 '12 at 13:46

18

You can create new image, render background image first and then render overlay image over it. Since overlay has alpha channel and line is placed where it should be (i mean there is opaque space on top and left side of line) you do not need coordinates. Illustration code:

Image imageBackground = Image.FromFile("bitmap1.png");
Image imageOverlay = Image.FromFile("bitmap2.png");

Image img = new Bitmap(imageBackground.Width, imageBackground.Height);
using (Graphics gr = Graphics.FromImage(img))
{
    gr.DrawImage(imageBackground, new Point(0, 0));
    gr.DrawImage(imageOverlay, new Point(0, 0));
}
img.Save("output.png", ImageFormat.Png);

answered Oct 25 '12 at 13:46

Jan Novák

574
3
21

Thanks but with the above code second image is overlapping the background image. For instance, if my background image is some face and say user has edited it to add ear to the face. Both the images are saved differently. I would like merge the images in such a way that face should have ear at its correct place where user added it. – Gayatri Oct 26 '12 at 04:03
4

Thanks, i first had some trouble with your code, since my generated image was larger than my screensize. This caused part of the image to be cropped. I resolved it by using gr.DrawImage(imageBackground, new System.Drawing.Rectangle(0, 0, imageBackground.Width, imageBackground.Height)); gr.DrawImage(imageOverlay, new System.Drawing.Rectangle(0, 0, imageBackground.Width, imageBackground.Height)); instead of gr.DrawImage(imageBackground, new Point(0, 0)); gr.DrawImage(imageOverlay, new Point(0, 0)); – Rockney Nov 28 '17 at 08:34

score 0 · Answer 2 · answered Oct 25 '12 at 13:31

If you are using WPF, why not use a path for your overlay instead of an image if it is a simple line? This would allow it to scale to any size, and has methods for manipulating its dimensions.

If you are using Winforms, there are some similar graphics drawing capabilities you might leverage. Getting the dimensions of the image should be easy, assuming you're using a PictureBox, the following properties should suffice:

myPictureBox.Top
myPictureBox.Bottom
myPictureBox.Left
myPictureBox.Right

Similarly, for a WPF Image:

myImage.Margin

score 0 · Answer 3 · answered Apr 21 '22 at 12:10

I already needed to create a blank space around an image and I used the ImageFactory library to do that.

Here is the code. I guess you are capable to figure out how to adjust to your needs.

    public static Image ResizedImage(Image image, int desiredWidth, int desiredHeight)
    {
        Image res = (Bitmap)image.Clone();
        Image resizedImage;
        ImageLayer imageLayer = new ImageLayer();
        try
        {
            if (res != null)
            {
                //white background
                res = new Bitmap(desiredWidth, desiredHeight, res.PixelFormat);
                //image to handle
                using (var imgf = new ImageFactory(true))
                {
                    imgf
                        .Load(image)
                        .Resize(new ResizeLayer(new Size(desiredWidth, desiredHeight),
                                                ResizeMode.Max,
                                                AnchorPosition.Center,
                                                false));
                    resizedImage = (Bitmap)imgf.Image.Clone();
                }
                //final image
                if (resizedImage != null)
                {
                    imageLayer.Image = resizedImage;
                    imageLayer.Size = new Size(resizedImage.Width, resizedImage.Height);
                    imageLayer.Opacity = 100;
                    using (var imgf = new ImageFactory(true))
                    {
                        imgf
                            .Load(res)
                            .BackgroundColor(Color.White)
                            .Overlay(imageLayer);
                        res = (Bitmap)imgf.Image.Clone();
                    }
                }
            }
        }
        catch (Exception ex)
        {
            ex.Message;
        }
        return res;
    }

How do I overlay an image in .NET

3 Answers3

Linked