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
- Write a value which contain comma to a CSV file in c#?
- Reading CSV File with cells containing commas c#
- Split CSV with columns may contain ‘,’ Comma C#
- [Simple Way]-Cascading DropDownList in Asp.Net Mvc Using Jquery Ajax
- [Simple Way]-How to get data from database using JQuery Ajax in asp net MVC
- [Simple Way]-ASP.NET Core Upload Multiple File Web API model
- [Simple Way]- Image Upload in .NET Core Web API
- [Easy Way]-Receive File and other form data together in ASP.NET Core Web API
- Replace image in word document using C#
- How to add new rows to an existing word document table in C#
- Simple Way Find and replace text in Word document using C#
- Implementing “Remember Me” Feature in ASP.NET MVC
- [Solved]-Cookie loses value when page is changed in MVC
- How to post File Upload and other form fields to one action Asp .Net MVC C#
- How To Post File and Data to API using HttpClient C#
- Create ASP.NET Core Web API Without Entity Framework
- .NET Core Web API Using Code First Entity Framework Approach
- Create Asp.Net Core Web Api Using Entity Framework Database First
- Registration form with image upload in MVC using jquery Ajax
- How to make an Inline editable table in MVC using jquery?
- CRUD operation using partial view in MVC with modal popup
- Insert Update Delete Using Jquery Ajax and Modal Popup in Mvc
- Crud Operations in MVC Without Entity Framework
- Create Login,Signout and Registration in Asp .Net Mvc Using Entity
- Export Gridview to Excel and Csv in Asp .Net With Formatting Using c#
- How to Display Binary Image in Gridview from Database in Asp .Net c#
- [Solved]-How to Upload pdf file using jquery MVC?
- [Solved]-Uploading both data and files in FormData using Ajax MVC
- C# -Saving a base64 string as an image into a folder on server in Web Api
- [Solved]-Download pdf file from link and save in local file folder in Asp .Net
- [Solved]-Delete Files older than X Months,Days,Minute in a Directory- C# .NET
- [Solved]-LEFT OUTER JOIN in LINQ With Where clause in C#
- INNER JOIN,RIGHT JOIN,LEFT JOIN USING LINQ IN Multiple Table C#
- [Solved]-Convert Base64 To Image And Save in folder and Display it- C#
- [Solved]-How to Overlay Two Images in .NET-C#
- How to Create Multilingual Website in Asp .Net
- C# – How to add double quotes to a string that is inside a variable
- Update an Image with Upload Button For Each Row in Gridview-Asp .Net
- How to Bind Data in DataList Control in Asp.Net – C#
- Upload and Display an Image in Gridview From Image Path in Database -C#