Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Displaying Images in ASP.NET Using HttpHandlers

Article:
Viewed:  1628 
Posted On:  05/10/2013 03:11:59 
How to display Images using HttpHandlers in asp.net 

In this article I am going to show how we can show images using asp.net handler.

In below example I am using a XML which have my Image related data... You can pass your own height and width to show image...

<?xml version="1.0" encoding="utf-8" ?>
<IMAGES>
  <IMAGE>
    <id>1</id>
    <ImgPath>1.jpg</ImgPath>
  </IMAGE>
  <IMAGE>
    <id>2</id>
    <ImgPath>2.jpg</ImgPath>
  </IMAGE>
  <IMAGE>
    <id>3</id>
    <ImgPath>3.jpg</ImgPath>
  </IMAGE>
  <IMAGE>
    <id>4</id>
    <ImgPath>4.jpg</ImgPath>
  </IMAGE>
  <IMAGE>
    <id>5</id>
    <ImgPath>5.jpg</ImgPath>
  </IMAGE>
</IMAGES>

I am reading this XML on asp page and showing image in a DataList.. my aspx is:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Showing Image Using Handler</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table cellpadding="4" cellspacing="4" width="40%" align="center" style="border: solid 1px Gray;">
            <tr>
                <td>
                    <asp:DataList ID="listImg" runat="server" RepeatColumns="4" RepeatDirection="Horizontal"
                        CellPadding="4" ForeColor="#333333">
                        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <ItemTemplate>
                            <table>
                                <tr width="100%">
                                    <td>

                                        <img src="ImageHandler.ashx?width=100&Height=100&id=<%# DataBinder.Eval(Container.DataItem, "Id") %>&ImagePath=<%# DataBinder.Eval(Container.DataItem, "ImgPath") %>" />

                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                        <AlternatingItemStyle BackColor="White" ForeColor="#284775" />
                        <ItemStyle BackColor="#F7F6F3" ForeColor="#333333" />
                        <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                    </asp:DataList>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
 
My aspx.cs is: 

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq; 

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
            ReadData();
    }
 
    private void ReadData()
    {
        DataSet ds = new DataSet();
        ds.ReadXml(Server.MapPath("MyXMLFile.xml"));
        listImg.DataSource = ds;
        listImg.DataBind();
    }
}
 
My Handler code is:

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Collections;
using System.IO;
using System.Web.SessionState;

using
System.Drawing;
 
public class ImageHandler : IHttpHandler
{   

    private string XLen = "40";
    private string YLen = "40";
 
    public void ProcessRequest(HttpContext context)
    {
        if (context.Request["id"] != null)
        {
            if (context.Request["Height"] != null)
            {
                XLen = context.Request["Height"].ToString();
            }
            if (context.Request["width"] != null)
            {
                YLen = context.Request["width"].ToString();
            }
            string id = context.Request["id"].ToString();
            string ImgPath = context.Request["ImagePath"].ToString();
             Hashtable ht;
            ht = new Hashtable();
            FileStream fInfo = new FileStream(context.Server.MapPath(ImgPath), FileMode.Open);
            byte[] bFile;
            bFile = GenerateThumbnail(fInfo, XLen, YLen);
            ht.Add(id, bFile);
            fInfo.Close();
            Byte[] arrImg = (byte[])ht[id];
            context.Response.Clear();
            context.Response.ContentType = "image/jpeg";
            context.Response.BinaryWrite(arrImg);
            context.Response.End();
        }
    }
 
    private byte[] GenerateThumbnail(Stream fStream, string xLen, string yLen)
    {
        Image img = Image.FromStream(fStream);
        Image thumbnailImage = img.GetThumbnailImage(int.Parse(xLen), int.Parse(yLen), new Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero); 
        MemoryStream imageStream = new MemoryStream();
        thumbnailImage.Save(imageStream, System.Drawing.Imaging.ImageFormat.Jpeg);
        byte[] imageContent = new Byte[imageStream.Length];
        imageStream.Position = 0;
        imageStream.Read(imageContent, 0, (int)imageStream.Length);
        return imageContent;
    }

    public bool ThumbnailCallback()
    {
        return true;
    }

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

Below is my output: 


ASHX Handler.png

Image 1.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us