Article

	C#
	ADO.Net
	.NET
	ASP.Net & Web Forms
	Custom Controls
	Web Development
	Exception Handling
	XML
	Database
	Security in .Net
	Testing
	Web Services
	Windows Services
	Windows Controls
	WCF
	AJAX
	WPF
	XAML
	Reporting
	Setup
	VB.Net
	LINQ
	JQuery
	SilverLight
	JavaScript
	HTML5
	Crystal Report
	Cloud Computing
	Share Point
	Visual C++
	MVC
	Android
	PHP
	Java
	HTML
	WordPress
	Joomla
	Products
	Drupal
	Windows Phone
	JSON
	LightSwitch
	iPhone/iPad
	Ruby on Rails
	IIS 7
	Windows 8
	CSS/CSS3
	Excel
	MS Access
	Shortcut Keys
	Visual SourceSafe
	Team Foundation Server
	APIs

Follow Us

Top Contributor

Advertise with Us

Article

Forum

Blog

Quiz

Beginner

Careers

Contact

Home

Product

Services

About Us

Interview

DeveloperSection

Submit an Article

Submit Blog

Home >> ASP.Net & Web Forms >> Dynamically loading image in Image control in ASP.NET

Dynamically loading image in Image control in ASP.NET

by Awadhendra Tiwari on 2/25/2011 6:53:59 PM

Views: 14658 Comments: 5

Dynamically loading image in Image control in ASP.NET

In this demonstration we tell you that how to add images in image control dynamically.

Steps to implement this task

Please follow the following steps to implement desire task

Ø Add two aspx file in project and give named as like Default.aspx and DynamicImage.aspx.

Ø Write down following aspx script code to design user interface on Default aspx.

<asp:Image ID="Image1" runat="server" Height="432px" Width="866px" />

<br />

<asp:TextBox ID="TextBox1" runat="server"

style="margin-left: 26px; margin-top: 17px" Width="183px"></asp:TextBox>

<asp:Button ID="Button1" runat="server" onclick="Button1_Click"

style="margin-left: 21px; margin-top: 15px" Text="Enter Image URL"

Width="136px" />

</div>

Ø At the click event of Button1 writes down following code.

Image1.ImageUrl = "DynamicImage.aspx?path=" + TextBox1.Text;

Ø At the load event of DynamicImage.aspx write down the following code
protected void Page_Load(object sender, EventArgs e)

{

string path = Request.QueryString[0];

if (path != null)

{

System.Drawing.Bitmap img = new System.Drawing.Bitmap(path);

img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);

}

Output of the following code

Dynamic add image in image control in asp.net

After clicking Enter Image URL button following output will be displayed

Dynamic add image in image control in asp.net

Report Abuse Form
Reason:

Comment Enable↑

Dynamic Bitmap
by Emerson Carvalho 7/9/2012 9:22:10 AM

How can I do this with a dynamic bitmap instead a Local File?

Like this:

var myImage = new Bitmap(800,250);

Report Abuse

Dynamic Bitmap
by Arun Singh 7/11/2012 8:08:04 AM

Hi Emerson Carvalho,
Could you explain your question in detail actually what are you trying to do?

Report Abuse

Dynamic Bitmap
by Emerson Carvalho 7/11/2012 8:31:56 AM

I'm trying to create a image using the System.Drawing.Graphics and display in a control on the page, but I don't know how do this without save the image on the System Files.

I want to set the new image to a specific "<asp:Image" on the page

Part of my code:

var newImage = new Bitmap(800,250);

System.Drawing.Graphics g = Graphics.FromImage(newImage);
Rectangle Box = new Rectangle(10, 10, newImage.Size.Width - 20, newImage.Size.Height - 20);

g.DrawRectangle(Pens.Black, Box);

//Many other methods to draw

Response.ContentType = "image/jpeg";

newImage.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);

Report Abuse

Dynamic Bitmap
by Arun Singh 7/12/2012 3:03:25 AM

Hey Emerson Carvalho,
I think you want to assign bitmap image in asp image control directly without saving image file in system. Let me tell you it is not possible to directly set the image in asp image control!! because of unlike System.Windows.Forms.PictureBox, System.Web.UI.WebControls.Image does not have Bitmap property. System.Web.UI.WebControls.Image is Server version of html img tag (Its takes ImageUrl and renders as "<img src='/images/xyz.jpg' />").

To perform this task. Firstly you have to save the bitmap to a file, then assign that file to the Image1.ImageUrl, then load that file. As above article is showing.

Please marked as answer if this post will resolved your problem.

Report Abuse

Dynamic Bitmap
by Emerson Carvalho 7/12/2012 5:23:06 AM

Hello Arun Singh,

I solve my problem creating a Handler.ashx.

I call the Handler in the page like this:

<asp:Image ID="myImage" ImageUrl="~/ImageHandler.ashx?id=1" runat="server" />

And the handler will return the image without save the file.

<%@ WebHandler Language="C#" Class="ImageHandler" %>
 
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Web;
 
public class ImageHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.Clear();
 
        if (!String.IsNullOrEmpty(context.Request.QueryString["id"]))
        {
            int id = Int32.Parse(context.Request.QueryString["id"]);
 
            // Now you have the id, do what you want with it, to get the right image
            // More than likely, just pass it to the method, that builds the image
            Image image = GetImage(id);
 
            // Of course set this to whatever your format is of the image
            context.Response.ContentType = "image/jpeg";
            // Save the image to the OutputStream
            image.Save(context.Response.OutputStream, ImageFormat.Jpeg);
        }
        else
        {
            context.Response.ContentType = "text/html";
            context.Response.Write("<p>Need a valid id</p>");
        }
    }
 
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
 
    private Image GetImage(int id)
    {
        var newImage = new Bitmap(800, 250);
        System.Drawing.Graphics g = Graphics.FromImage(newImage);
        g.FillRectangle(Brushes.White, 0, 0, newImage.Width, newImage.Height);

        Rectangle Box = new Rectangle(10, 10, newImage.Size.Width - 20, newImage.Size.Height - 20);
        g.DrawRectangle(Pens.Black, Box);

//My drawing code

        return newImage;
    }
}

Report Abuse

Title

Comment

Design

Html

Notify me via email