Dotnet Galaxy: How to write text on an Image using C#

Are you looking for a C# code to write text on an image? In this article I am trying to explain how we can write text on an image?
Using this code you can write any text in an image at any place, using any color and format of the text.
First we will look at the form design. The form looks like below,

We will be writing the on click of the button. User must be entering the Image path and name and also the test to be written in an image.
Below is the complete source code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="textOnImage.aspx.cs" Inherits="Blog.textOnImage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 100%;
        }
        .auto-style2 {
            width: 113px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <br />
        <table class="auto-style1">
            <tr>
                <td class="auto-style2">Image Path</td>
                <td>
                    <asp:TextBox ID="txtImage" runat="server" Width="197px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="auto-style2">Enter the Text</td>
                <td>
                    <asp:TextBox ID="txtText" runat="server" Width="198px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="auto-style2">&nbsp;</td>
                <td>
                    <asp:Button ID="btnWrite" runat="server" OnClick="btnWrite_Click" Text="Write Text On Image" />
                </td>
            </tr>
        </table>
        <br />
    
    </div>
    </form>
</body>
</html>

On button click event you may write the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Drawing;
using System.Drawing.Imaging;

namespace Blog
{
    public partial class textOnImage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnWrite_Click(object sender, EventArgs e)
        {
            string strImgName = txtImage.Text.ToString();
            //Loading the image
            Bitmap btMapImgName = new System.Drawing.Bitmap(strImgName);
            Graphics grpImgName = Graphics.FromImage(btMapImgName);
            StringFormat strFormat = new StringFormat();
            strFormat.Alignment = StringAlignment.Center;
            //Give color to the font
            Color colorStringColor = System.Drawing.ColorTranslator.FromHtml("#DF0101");
            string strTextToWrite = txtText.Text.ToString();
            //Writing the text
            grpImgName.DrawString(strTextToWrite, new Font("Comic Sans MS", 50,
            FontStyle.Italic), new SolidBrush(colorStringColor),
            new Point(200, 100), strFormat);
            //Set the content type to JPEG and write the image to output stream
            Response.ContentType = "image/jpeg";
            btMapImgName.Save(Response.OutputStream, ImageFormat.Jpeg);
            string strOutPutPath = @"D:\\NewImage.jpg";
            btMapImgName.Save(strOutPutPath);
        }
    }
}

To do this we need the following namespaces.

using System.Drawing;
using System.Drawing.Imaging;

If you are not adding above namespaces you may get errors like below.

The output looks like below.

When we click on the button the image will save on to the location given in the code. Below is the output image after writing the text.

Thursday, March 6, 2014

How to write text on an Image using C#

No comments: