image downloads as JSON array of ints but i want to render this image by turning into a byte[]

Question

I have a webservice which returns a byte[] to the client, to show images.

This image is stored in a json object, see fiddle: http://jsfiddle.net/FuGN8/

the array of numerics is assigned to result after i do a simple line of:

result = result["d"];

This is fetched via a AJAX call, so i want to render an image from this data.

Naturally, doing something like:

$("img#mytag").attr("src", result);

would not do what i want.

Is there a javascript command which would do what i am intending?

my Server side code I changed to do:

WebClient wsb = new WebClient();
string url = "...";
byte[] resp = wsb.DownloadData(url);
UTF8Encoding enc = new UTF8Encoding();
return enc.GetString(resp);

but on the client side, since i do not know what the image type would be, i was attempting:

src="data:image/*;base64,"+RET_VAL

and it wasnt doing anything. On a similar note, i also tried:

src="data:image;base64,"+RET_VAL

since the above was doing UTF8 encoding, i also added in a the following:

src:"data:image;base64,"+window.btoa(unescape(encodeURIComponent( RET_VAL )))

yes, though I was doing forwarding to do something like: WebClient wsb = new WebClient(); wsb.Headers.Add("Authorization", token); return wsb.DownloadData([url]); which returns a byte[] to client — Fallenreaper, Oct 30 '13 at 18:23
If you convert your byte array to a base64 string, you can use the data URI Scheme as @Ramón mentioned. — Guilherme Sehn, Oct 30 '13 at 18:26

Guilherme Sehn · Accepted Answer · 2013-10-30T19:20:29.083

2

You are not using Base64 encoding in your image. Use the method Convert.ToBase64String instead. You could also send the image type in the JSON response in order to apply it to the src attribute. I could get it to work with this code:

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public string SendImage()
{
    var path = @"C:\teste.png";
    byte[] bytes = File.ReadAllBytes(path);

    Image image = null;
    using (var stream = new MemoryStream(bytes))
        image = Image.FromStream(stream);

    var json = new Dictionary<string, object>();
    json.Add("type", new ImageFormatConverter().ConvertToString(image.RawFormat).ToLower());
    json.Add("contents", Convert.ToBase64String(bytes));

    return new JavaScriptSerializer().Serialize(json);
}

And this JavaScript code:

$.ajax({
    type: 'GET',
    url: 'WebService1.asmx/SendImage',
    contentType: 'application/json; charset=utf-8',
    success: function (response) {
        var data = JSON.parse(response.d);
        $('<img />').attr('src', 'data:image/' + data.type + ';base64,' + data.contents).appendTo('body');
    }
})

Of course you'll have to adapt it as you are using a WebClient to get your image.

edited Oct 30 '13 at 19:20

answered Oct 30 '13 at 19:11

Guilherme Sehn

6,727
18
35

I adjusted the return statement. The only thing i cant quite think of is your data.type. I have no idea what the type would be. There is no PATH persay. The URL doesnt have it, and the only thing i could think is that it is inside the header of data.contents somewhere. – Fallenreaper Oct 30 '13 at 19:14
Take a look at this question: http://stackoverflow.com/questions/5209506/how-can-i-know-what-image-format-i-get-from-a-stream – Guilherme Sehn Oct 30 '13 at 19:15
It seems to render it without"/jpg" or "/png" etc. Im not sure if that is a chrome thing only, or what thought – Fallenreaper Oct 30 '13 at 19:16
1

I suggest you put the real mime type there to ensure it will run right on all browsers. I edited the code to pick the image type without having to read the path. – Guilherme Sehn Oct 30 '13 at 19:21
Thats the perfect answer. :) Thank you. – Fallenreaper Oct 30 '13 at 19:31

score 1 · Answer 2 · answered Oct 30 '13 at 18:15

1

The src attribute of your img element expects the image location (its URL), not the actual image bytes.

To put your data as an URL you may use the data URI Scheme. For example, for a .png image:

data:image/png;base64,<your image bytes encoded in base64>

answered Oct 30 '13 at 18:15

Ramón Gil Moreno

809
5
19

i was trying this (see my edit for my attempts). Does it need to define a type? – Fallenreaper Oct 30 '13 at 18:44

image downloads as JSON array of ints but i want to render this image by turning into a byte[]

2 Answers2