Friday 26 December 2014

How to add Dynamically Text to Images Retrieved from the Database using an ASP.NET

In this article I am explain How to add text on image. We often create applications where we retrieve images from the database and display it on the page. At times, we may need to add some text or a copyright notice dynamically on the images.

Default.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Write Text On Image</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <img alt="Image" id="imgdynamitext" src="TextOnImageHandler.ashx?id=5" />
    </div>
     </form>
</body>
</html>

I am using an HttpHandler  to get images and then add some text to the retrieved images.

TextOnImageHandler.cs

<%@ WebHandler Language="C#" Class="TextOnImageHandler" %>

using System;
using System.Web;
using System.Drawing;
using System.Configuration;
using System.ComponentModel;
using System.Drawing.Imaging;
using System.Data;
using System.Data.SqlClient;

public class TextOnImageHandler : IHttpHandler {

    byte[] empPic = null;
    long seq = 0;

    public void ProcessRequest(HttpContext context)
    {
        Int32 empno;

        if (context.Request.QueryString["id"] != null)
            empno = Convert.ToInt32(context.Request.QueryString["id"]);
        else
            throw new ArgumentException("No parameter specified");

        // Convert Byte[] to Bitmap
        Bitmap newBmp = ConvertToBitmap(ShowEmpImage(empno));
        // Watermark Text to be added to image
        string text = "Asp.Net Jitendra";
        Bitmap convBmp = AddTextToImage(newBmp, text);
        convBmp.Save(context.Response.OutputStream, ImageFormat.Jpeg);
        newBmp.Dispose();
        convBmp.Dispose();
    }

    // Add Watermark Text to Image
    protected Bitmap AddTextToImage(Bitmap bImg, string msg)
    {
        // To void the error due to Indexed Pixel Format
        Image img = new Bitmap(bImg, new Size(bImg.Width, bImg.Height));
        Bitmap tmp = new Bitmap(img);
        Graphics graphic = Graphics.FromImage(tmp);
        // Watermark effect
        SolidBrush brush = new SolidBrush(Color.FromArgb(120, 255, 255, 255));
        // Draw the text string to the Graphics object at a given position.
        graphic.DrawString(msg, new Font("Times New Roman", 16, FontStyle.Italic),
             brush, new PointF(10, 30));
        graphic.Dispose();
        return tmp;
    }

    // Convert byte array to Bitmap (byte[] to Bitmap)
    protected Bitmap ConvertToBitmap(byte[] bmp)
    {
        TypeConverter tc = TypeDescriptor.GetConverter(typeof(Bitmap));
        Bitmap b = (Bitmap)tc.ConvertFrom(bmp);
        return b;
    }

    public byte[] ShowEmpImage(int empno)
    {
        string conn = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
        SqlConnection connection = new SqlConnection(conn);
        string sql = "SELECT photo FROM Employees WHERE EmployeeID = @ID";
        SqlCommand cmd = new SqlCommand(sql, connection);
        cmd.CommandType = CommandType.Text;
        cmd.Parameters.AddWithValue("@ID", empno);
        connection.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.Read())
        {
            seq = dr.GetBytes(0, 0, null, 0, int.MaxValue) - 1;
            empPic = new byte[seq + 1];
            dr.GetBytes(0, 0, empPic, 0, Convert.ToInt32(seq));
            connection.Close();
        }

        return empPic;
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

You can download Northwind database Here

Output:-




Note: I hope this article is helpful for you. Please Like and Share it.


No comments:

Post a Comment