I want to create an image with text for verification, similar to the ones used in Google, Yahoo in user registration. How can I create this?

The HTML markup for the sample page with image verification will look like something like this: 


<form id="form1" runat="server">
<div>
    <asp:Image ID="VerImage" runat="server" ImageUrl="~/ImageViewer.ashx"/>
    <asp:TextBox ID="VerText" runat="server" />
    <asp:CustomValidator id="VerifyVal" runat="server" ValidateEmptyText="true" 
	ControlToValidate="VerText" OnServerValidate="VerifyVal_ServerValidate">*
    </asp:CustomValidator>
    <asp:Button Text="Verify" runat="server" />
</div>
</form>
The image is rendered using a ImageViewer.ashx handler. The textbox text is verified using a CustomValidator. In the server-side, we handle the Page load event and CustomValidator ServerValidate event. In the Page load event we create a verification text and store it in a session variable. In the ServerValidate event, we pick the verification text from the Session variable and validate the text in the textbox. The code is as below: 

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string verText = "Sample";
        Session["Verify"] = verText;
    }
}

protected void VerifyVal_ServerValidate(object source, ServerValidateEventArgs args)
{
    args.IsValid = false;
    string verText = (string)Session["Verify"];
    if (!String.IsNullOrEmpty(verText))
    {
        if (VerText.Text == verText)
        {
            args.IsValid = true;
        }
    }
}
The image rendering is performed in a handler class - ImageViewer.ashx. The ProcessRequest method gets the verification text from the session variable. This is possible only if the handler class derives from IRequiresSessionState (System.Web.SessionState). IRequiresSessionState is a marker interface. So, no new methods have to be defined.

After getting the verification text, an image object is created from a background image file. Using the graphics object of the image object, we can draw the string. Once the string is drawn, the image object can be streamed into the Response object. The code for the handler is below: 


public class ImageViewer : IHttpHandler, IRequiresSessionState
{

    public void ProcessRequest(HttpContext context)
    {    
        Image image = Image.FromFile(context.Server.MapPath("~/red.jpg"));
        Graphics gp = Graphics.FromImage(image);

        string text = "Default";
        if (context.Session!=null && context.Session["Verify"]!=null)
            text = (string)context.Session["Verify"];

        Font font = new Font(new FontFamily("Arial"), image.Height/3);
        Brush brush = Brushes.White;
        PointF point = new PointF(image.Width/4, image.Height/4);
        gp.DrawString(text, font, brush, point);

        image.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif);
    }

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