Friday, February 4, 2011

How to bind a MemoryStream to asp:image control?

Is there a way to bind a MemoryStream to asp:image control?

  • You probably want to create an http handler (.ashx file) to serve up the image.

  • Best bet is to create an HttpHandler that would return the image. Then bind the ImageUrl property on the asp:Image to the url of the HttpHandler.

    Here is some code.

    First create the HttpHandler:

    <%@ WebHandler Language="C#" Class="ImageHandler" %>
    
    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)
       {
           // Not sure how you are building your MemoryStream
           // Once you have it, you just use the Image class to 
           // create the image from the stream.
           MemoryStream stream = new MemoryStream();
           return Image.FromStream(stream);
       }
    }
    

    Next, just call it inside your aspx page where you are using the asp:Image.

    <%@ 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></title>
    </head>
    <body>
        <form id="form1" runat="server">
         <div>
          <asp:Image ID="myImage" ImageUrl="~/ImageHandler.ashx?id=1" runat="server" />
         </div>
        </form>
    </body>
    </html>
    

    And that is it.

    From Dale Ragan
  • I am assuming you need to generate dynamic images from asp.net You might be in luck http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16449

    Hanselman blogged about it recently http://www.hanselman.com/blog/ASPNETFuturesGeneratingDynamicImagesWithHttpHandlersGetsEasier.aspx

    From Gulzar
  • While Databinding a MemoryStream to a Image is not possible, it could be possible to use a Label/GenericControl, some Code and the data URI scheme to embed Images in Pages, but there are severe issues with that approach:

    Disadvantages

    • Embedded content must be extracted and decoded before changes may be made, then re-encoded and re-embedded afterwards.
    • Cookies are not supported.
    • Information that is embedded more than once is redownloaded as part of the containing file, and thus does not benefit from the browser's cache.
    • Browsers may limit URI lengths, creating an effective maximum data size. For example, URIs in previous versions of Opera had limits of 4kB, and 32kB for IE8 Beta 1[citation needed]
    • Data is included as a simple stream, and many processing environments (such as web browsers) may not support using containers (such as multipart/alternative or message/rfc822) to provide greater complexity such as metadata, data compression, or content negotiation.
    • Microsoft's Internet Explorer, through version 7 (some 70% of the market as of 2008 Q2), lacks support.

    The better Approach is to use a separate "Image.aspx" Page which takes and outputs your MemoryStream, kinda like I did in my Photo Album software that i've created when I started learning ASP.net:

    (Don't laugh, that was my first attempt at ASP.net :-)

    Edit: Agreed on ASHX, the code above is just to show one sample implementation. When I come around to update the Photo Album, it will use ASHX for that.

  • @Will and Ben Griswald: instead of "image.aspx" use "image.ashx".

    It's more light-weight than a full ASP.Net Page, and it's specifically designed to handle content-types other than text/html.

  • Nope.

    But you can create a special page to stream that image out. First, you set the URL of the image to the page that performs the streaming, including some url parameters that let you know where to get the image:

    <img src="GetImage.aspx?filename=foo" ... />
    

    in GetImage.aspx, you get the filename (or whatever) from the URL, load the image in your MemoryStream, and then write the content of that memory stream directly to the HttpResponse:

        response.Expires = 0;
        response.Buffer = false;
        response.Clear();
        response.ClearHeaders();
        response.ClearContent();
        response.ContentType = "image/jpeg";
        response.BinaryWrite(stream);
        response.Flush();
        response.Close();
    
    Will : If you down at least give a friggen reason. Jerks.
    From Will
  • thanks to everybody for your answers. i also used the httphandler for this issue, but i need a little more than that. i want to pass a parameter to httphandler that generates different images to a Grid and the difference will be provided by id of the row. so i have to pass a parameter to this httphandler. does it convenient? have a suggestion?

    From yapiskan
  • A handler can accept a url parameter like any other request. So instead of linking your <asp:image to "image.ashx" you'd set it to "image.ashx?ImageID=" + [Your image ID here]

  • @yapiskan - I refactored the code where you can pass an id to it. I think you can take it from here.

    From Dale Ragan
  • I'm having a problem where users with a slow connection aren't getting my image feed properly.

    i'm sending them new images every second to a picturebox inside an Ajax Update panel, using an Ajax Timer.

    so if their connection is really slow, one image doesnt load fully before the next one comes in, so they never get the whole picture...

    Any ideas?

0 comments:

Post a Comment