Need to generate a image in ASP.Net through webservice

Question

For my new asp.net application that I am developing I would like to generate an image at runtime using a webservice (return bytes), and show this as a image using Javascript (so that I can have ajax functionality.

Any ideas how to do this?

Or any ideas as to how I can generate an image at runtime, and show it on my webpage using Ajax (must not postback), without having to save the image to any location on the hard drive?

Thanks!

Answer 1

Here is the code to have an ashx file to return the image for you.

Now, add the following handler information to your web.config

<httpHandlers>
  <add verb="*" path="ImageGenerator.ashx" type="MyHandlers.HttpImageHandler, MyHandlers" />
</httpHandlers>

Here is some code from Allen Guest's Blog

ImageGenerator.ashx

namespace MyHandlers
{
      public class HttpImageHandler : IHttpHandler
      {
        private string GetExtension(string url)
        {
          string extension = "";
          if (null != url)
          {
            int indexSeperator = url.LastIndexOf(".");
            if (indexSeperator > -1)
              extension = url.Substring(indexSeperator + 1, url.Length - indexSeperator - 1).ToUpper();
          }
          return extension;
        }

        private string GetContentType(string url)
        {
          switch (GetExtension(url))
          {
            case "JPG" :
            case "JPEG" :
              return "image/jpg";
            case "PNG" :
              return "image/png";
            case "GIF" :
              return "image/gif";
            default :
              return "";
          }
        }

        private ImageFormat GetImageFormat(string url)
        {
          switch (GetExtension(url))
          {
            case "JPG" :
            case "JPEG" :
              return ImageFormat.Jpeg;
            case "PNG" :
              return ImageFormat.Png;
            case "GIF" :
              return ImageFormat.Gif;
            default :
              return ImageFormat.Bmp;
          }
        }

        private Image GetImage(string url)
        {
          HttpWebRequest wReq = (HttpWebRequest)WebRequest.Create(url);
          HttpWebResponse wRes = (HttpWebResponse)(wReq).GetResponse();
          Stream wStr = wRes.GetResponseStream();
          return Image.FromStream(wStr);
        }

        #region IHttpHandler Members
        public void ProcessRequest(HttpContext context)
        {
          string url = context.Request.QueryString["imageUrl"];
          if (null != url)
          {
            context.Response.Clear();
            context.Response.ContentType = GetContentType(url);
            Image img = GetImage(url);
            img.Save(context.Response.OutputStream, GetImageFormat(url));
          }
          context.Response.End();
        }

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

Make a javascript call to the ashx file, by passing the image to get as a imageUrl paramter. And you are done

Answer 2

Instead of having the web service put an ASHX page with the querystring parameters handling the input params. Make sure the Response.Content type is image/png

This ASHX page will generates the image stream on the fly and send it to the requesting image object. With this there is no image file saved on the server.

Here is a links with full code for the ASHX .

After you have done this, in JavaScript access the image object via DOM and set/change the SRC property.

function ChangeImage(param1, param2)
{
  var url = "http://someserver/somepage.ashx?param1=" + param1 + "&param2=" + param2;
  var image1 = document.getElementById("MyImage");
  image1.src = url;
}

Answer 3

Instead of using a web service I would suggest you implement a HttpHandler.

I you use a web service for this your java script code must create an image from the binary data received and that will be clumsy if not very difficult.

Creating a httphandler is easy, just create a class that implements the IHttpHandler interface and then register it in your web.config file.

You should find plenty of recources on this if you google it.

As to displaying the image, you could just use a regular img-tag like this:

<img src="yourhttphandler.ashx?id=1" />

To update it you could just set a new value for the src-attribute:

yourimage.src = "yourhttphandler.ashx?id=2";