In this article, We learn how you can overlay two images using Asp .Net .Some days earlier in my Web Application Project, I got a requirement to develop a Video Gallary Just like YouTube in my MVC Web Application.

For that, I need to show the Video Thumbnail on each video with a play icon. After completing this task perfectly, I decided to share the code with you all.

Basically, I decided to create a new image, render background  Thumbnail image first, and then render an overlay Play Icon image over it.

I don’t want to replace one image by another. I want to put the second small image somewhere on the first image so I can see both images.

So Basically My requirement is that I want to put a play icon image on the center of the first(background) image.So let us start.

  • Create an empty application.
  • Create a folder.
  • Add a Background image and play icon.

Html Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Converter.aspx.cs" Inherits="Converter" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="ActualImage" Font-Bold="True"></asp:Label>
        <asp:Image ID="Image1" runat="server" Width="134px" />
         <asp:Label ID="Label2" runat="server" Text="OverlayImage" Font-Bold="True"></asp:Label>
         <asp:Image ID="Image2" runat="server" Width="135px" />
    </div>
    </form>
</body>
</html>

C# Code

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Converter : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Draw();
        Image1.ImageUrl = "Video/BackGround.jpg";
        Image2.ImageUrl = "Video/output.png";
    }
    public void Draw()
    {
        string BackgroundImage = Server.MapPath("Video/BackGround.jpg");
        string IconImage = Server.MapPath("Video/play.png");
        string OutputImage = Server.MapPath("Video/output.png");
        System.Drawing.Image imageBackground = System.Drawing.Image.FromFile(BackgroundImage); //background image or big image
        System.Drawing.Image imageOverlay = System.Drawing.Image.FromFile(IconImage); //small image

        System.Drawing.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(imageBackground.Width / 2 - 50, imageBackground.Height / 2 - 50));
        }
        img.Save(OutputImage, ImageFormat.Png);
    }
}

Output:-

The post [Solved]-How to Overlay Two Images in .NET-C# appeared first on Software Development | Programming Tutorials.



Read More Articles