locked
return images from Wcf service and access it on clientside ajax RRS feed

  • Question

  • User1318172346 posted

    Hi,

    I am trying to accomplish gettting images from a WCF service via clientside and displaying it on client browser, but I am not sure how I can return images from a WCF service, i mean the format of the image which will be supported from client side ajax.

    Can I return it as System.Drawing.Image? If so , how can I access it on clientside? Or do I have to return it in some other format.

    Thanks in advance.

    Monday, May 19, 2008 10:30 AM

Answers

  • User-315082118 posted

    Let the browser do the job for you, your webmethod should return a string with the new image’s URL, set an img tag in your page HTML, call your webmethod for the URL of the new image, when you get the result of your webmethod set the src property of the img tag to the URL you get, it will be loaded by the browser.

    <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p>function methodResult(result) </o:p><o:p>{</o:p><o:p>    </o:p><o:p>$get("MyImage").src = result;</o:p><o:p></o:p><o:p>}</o:p>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 19, 2008 11:22 AM
  • User2066886143 posted

    Sivi,

    I don't think you can do this directly from the client side, except the way Mr Mercury suggested.

    What you might want to do, if you need WCF for a distributed scenario, is have the WCF service return a byte array.  You then use an http handler to turn the byte array into an http response that browsers will recognize as an image.  This is probably the most common use of http handlers, by the way, and you'll find lots of examples on the Internet about how to do this.  Here's one example.

    Finally, you have your client get the image by calling your http handler.

    If you don't need a distributed architecture, you might want to simply move the code to generate your byte stream from the service to the http handler itself.

    I think this gives you three options to play with:

    1. Client calls WCF service, which returns an address.

    2. Client calls http handler, which calls WCF service, which returns byte array.

    3. Client just calls http handler.  No services.

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 1, 2008 11:19 AM

All replies

  • User-315082118 posted

    Let the browser do the job for you, your webmethod should return a string with the new image’s URL, set an img tag in your page HTML, call your webmethod for the URL of the new image, when you get the result of your webmethod set the src property of the img tag to the URL you get, it will be loaded by the browser.

    <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p>function methodResult(result) </o:p><o:p>{</o:p><o:p>    </o:p><o:p>$get("MyImage").src = result;</o:p><o:p></o:p><o:p>}</o:p>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 19, 2008 11:22 AM
  • User1318172346 posted

    Thanks for the reply. That would work. Is there any other ways to implement the same above functionality . I would like to know all the different ways to do the above functionality.

    Tuesday, May 27, 2008 8:37 AM
  • User-315082118 posted
    To tell you the truth I don’t think there’s another way of doing this.<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p>
    Saturday, May 31, 2008 12:52 PM
  • User2066886143 posted

    Sivi,

    I don't think you can do this directly from the client side, except the way Mr Mercury suggested.

    What you might want to do, if you need WCF for a distributed scenario, is have the WCF service return a byte array.  You then use an http handler to turn the byte array into an http response that browsers will recognize as an image.  This is probably the most common use of http handlers, by the way, and you'll find lots of examples on the Internet about how to do this.  Here's one example.

    Finally, you have your client get the image by calling your http handler.

    If you don't need a distributed architecture, you might want to simply move the code to generate your byte stream from the service to the http handler itself.

    I think this gives you three options to play with:

    1. Client calls WCF service, which returns an address.

    2. Client calls http handler, which calls WCF service, which returns byte array.

    3. Client just calls http handler.  No services.

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 1, 2008 11:19 AM
  • User-130425747 posted

    After messing about trying to do this myself for a while I have discovered it is pretty simple. 

    Just have your service mehod return a Stream. Create the stream as a memory stream and push the image into this stream from your image on disk or by saving an Image object from memory directly to the stream. Finally reset the position of the memory stream back to 0 before returning it from your web method. This last step is very important otherwise you will simply get nothing in the response and no error.

    This is an over simplified example with a hardcoded ImageFormat set, however it works as is.

        [ServiceContract]
        public interface IImageHandler
        {
            [OperationContract]
            [WebInvoke(Method = "GET")]
            Stream GetImage(int imageRowId, string imageColumnName, int width, int height);
        }
    



        [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Required)]
        abstract class ImageHandler : IImageHandler
        {


        [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Required)]
        abstract class ImageHandler : IImageHandler
        {
    
            public Stream GetImage(imagePath as string)
            {
                MemorySteam imageAsMemoryStream = GetImageAsMemoryStream(imagePath);
                return imageAsMemoryStream;
            }
    
            private MemoryStream GetImageAsMemoryStream(string imagePath)
            {
                MemoryStream imageAsMemoryStream = new MemoryStream();
                System.Drawing.Bitmap image = new System.Drawing.Bitmap(imagePath);
                image.Save(imageAsMemoryStream, ImageFormat.Jpeg);
                imageAsMemoryStream.Position = 0;
                return imageAsMemoryStream;
            }
    

    Hope this helps.

    Cheers,

    Ed




    Saturday, September 12, 2009 8:17 AM
  • User-315082118 posted

    I fail to see how to show the image in the browser

    Monday, September 14, 2009 8:37 AM
  • User1960554617 posted

    Many thanks, this works great and is exactly what I was looking for - one tip is to ensure that you use [WebInvoke(Method = "GET")] instead of [WebGet] on your service contract as the later one will prompt to open or save the image in an external application rather than just displaying it in the browser as the orginal poster required.

    Thursday, December 17, 2009 6:33 AM
  • User-130425747 posted

    Nice one, well spotted. I have used WebInvoke in my current code, I didn't realise I had WebGet here.


    Cheers,


    Ed

    Thursday, December 17, 2009 3:31 PM
  • User-130425747 posted

    Nice one, well spotted. I have used WebInvoke in my current code, I didn't realise I had WebGet here.


    Cheers,


    Ed

    Thursday, December 17, 2009 3:33 PM
  • User-330082601 posted

    Position = 0;

     

    Just what I needed! 

    Tuesday, December 22, 2009 12:15 PM