Returning an image from a RESTful WCF service

Question

I have this very simple DTO: ``` [DataContract] public class DTO { [DataMember] public byte[] Image {get; set; } } ``` And this very simple service: ``` [ServiceContract] public interface IFooService { [WebGet( UriTemplate = "", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)] List GetDTOs(); } ``` In my global.asax, I have: ``` RouteTable.Routes.Add(new ServiceRoute("foo", new WebServiceHostFactory(), typeof(FooService))); ``` Now, when I call this from my browser, I am getting an array of bytes in JSON format. Good so far. Now, how do I turn that array of bytes into an image? Or, is there a better way of going about this? I tried changing `byte[]` to `Stream`, but then when I call the service from Firefox, the response is empty despite an HTTP status code of 200. I am using Firebug and Fiddler. I don't think it's relevant, but since too much information never hurt anybody who wasn't a robot, here's the web.config: ```

Accepted Answer

Good so far. Now, how do I turn that array of bytes into an image?

Since you have tagged your question with javascript I assume that this is what you use to consume the service and you want to display the image in the browser. If this is the case you may take a look at the Data URI scheme which would allow you to show the image given the bytes you get from the service.

Here's an example how you could consume such service using jQuery and show the image:

```
$(function () {
    $.getJSON('/foo/', function (dtos) {
        $.each(dtos, function (index, dto) {
            var str = String.fromCharCode.apply(String, dto.Image);
            $('<img/>', {
                alt: '',
                src: 'data:image/png;base64,' + $.base64.encode(str)
            }).appendTo('body');
        });
    });
});
```

The `$.base64.encode` function comes from this plugin.

Returning an image from a RESTful WCF service

Solution

Problem

Related problems