Overlap one image as transparent on another in c#

Question

I'm creating Heatmap depending on the gazed areas of a given image. I can create the heatmap and save it to my desktop as a new file. But I want to create another image, which is made of the heatmap and the image which was gazed to collect the eye tracking data. I want the original picture to be the solid background, and then overlap (or overlay I don't know) the heatmap as transparent, and merge them into one new file. Is there a way to do it in c#? Thank you

Answer 1

Ok i found an answer,

first I resize my background picture

public static Bitmap ResizeImage(Bitmap image, int width, int height)
    {
        var destRect = new Rectangle(0, 0, width, height);
        var destImage = new Bitmap(width, height);

        destImage.SetResolution(image.HorizontalResolution, image.VerticalResolution);

        using (var graphics = Graphics.FromImage(destImage))
        {
            graphics.CompositingMode = CompositingMode.SourceCopy;
            graphics.CompositingQuality = CompositingQuality.HighQuality;
            graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
            graphics.SmoothingMode = SmoothingMode.HighQuality;
            graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;

            using (var wrapMode = new ImageAttributes())
            {
                wrapMode.SetWrapMode(WrapMode.TileFlipXY);
                graphics.DrawImage(image, destRect, 0, 0, image.Width, image.Height, GraphicsUnit.Pixel, wrapMode);
            }
        }
        return destImage;
    }

after that the heatmap must be set to another opacity level, in order to make background visible

public static Image SetImageOpacity(Image image, float opacity)
    {
        try
        {
            //create a Bitmap the size of the image provided  
            Bitmap bmp = new Bitmap(image.Width, image.Height);

            //create a graphics object from the image  
            using (Graphics gfx = Graphics.FromImage(bmp))
            {

                //create a color matrix object  
                ColorMatrix matrix = new ColorMatrix();

                //set the opacity  
                matrix.Matrix33 = opacity;

                //create image attributes  
                ImageAttributes attributes = new ImageAttributes();

                //set the color(opacity) of the image  
                attributes.SetColorMatrix(matrix, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);

                //now draw the image  
                gfx.DrawImage(image, new Rectangle(0, 0, bmp.Width, bmp.Height), 0, 0, image.Width, image.Height, GraphicsUnit.Pixel, attributes);
            }
            return bmp;
        }
        catch (Exception ex)
        {
            //MessageBox.Show(ex.Message);
            throw ex;
            //return null;
        }
    } 

finally we need to merge those two

        public static Image Overlap(Image source1, Image source2)
    {
        var target = new Bitmap(source1.Width, source1.Height, PixelFormat.Format32bppArgb);
        var graphics = Graphics.FromImage(target);
        graphics.CompositingMode = CompositingMode.SourceOver; // this is the default, but just to be clear

        graphics.DrawImage(source1, 0, 0);
        graphics.DrawImage(source2, 0, 0);

        return target;
    }

here is my background: original RTE

and here is the merged version, with the heatmap of the eyetracking data RTE + heatmap