How to add Watermark Image (Logo) to an image dynamically while uploading in ASP.NET.

Introduction

In this post I am explain how to add Watermark Image (logo) to an image dynamically while uploading in ASP.NET.

Steps :

Step-1 : Create New Project

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add Web Page and Design for Upload Image with Watermark Image (logo).

Go to Solution Explorer > Right Click on Project under solution explorer > Add > New item > Select Web Form using Master Page under web > Enter Name > > Select Master Page>Add.

HTML Code

    <h3>Upload Image with Watermark Image(Logo)</h3>
    <table>
        <tr>
            <td>Select Image : </td>
            <td>
                <asp:FileUpload ID="FU1" runat="server" /></td>
        </tr>
        <tr>
            <td>Watermark Logo : </td>
            <td>
                <asp:FileUpload ID="FULogo" runat="server" /></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" /></td>
        </tr>
        <tr>
            <td align="center" colspan="2">
                <asp:Label ID="lblMsg" runat="server" ForeColor="Red"></asp:Label>
            </td>
        </tr>
    </table>
    <asp:Image ID="Image1" runat="server" />

Step-3: Add a Folder for Save uploaded Images.

Go to Solution Explorer > Right Click on Project under solution explorer > Add > New Folder > Enter Name.

Step-4: Write code for Upload Image with Watermark Image.

Write below code into button click event for Upload Image with Watermark Image.

         
        protected void btnSave_Click(object sender, EventArgs e)
        {
            // HERE we will upload image with watermark LOGO
            string fileName = Guid.NewGuid() + Path.GetExtension(FU1.FileName);
            Image upImage = Image.FromStream(FU1.PostedFile.InputStream);
            Image logoImage = Image.FromStream(FULogo.PostedFile.InputStream);
            using (Graphics g = Graphics.FromImage(upImage))
            {
                g.DrawImage(logoImage, new Point(upImage.Width - logoImage.Width - 10, 10));
                upImage.Save(Path.Combine(Server.MapPath("~/UploadFiles"), fileName));
                Image1.ImageUrl = "~/UploadFiles" + "//" + fileName;
            }
        }

STEP-5: Run Application

Run Application and Get result in your browser.
Thank You

Related Post: