'How do I overlay an image in .NET

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?

c++sharp


Solution 1:[1]

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

Solution 2:[2]

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

Solution 3:[3]

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;
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jan Novák
Solution 2 jtheis
Solution 3 Ricardo Rodrigues

Related Questions