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
– Fallenreaper, Commented Oct 30, 2013 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
– Guilherme Sehn, Commented Oct 30, 2013 at 18:26

Guilherme Sehn · Accepted Answer · 2013-10-30 19:20:29Z

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, 2013 at 19:20

answered Oct 30, 2013 at 19:11

Guilherme Sehn

6,79722 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Fallenreaper Over a year ago

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.

Guilherme Sehn Over a year ago

Take a look at this question: stackoverflow.com/questions/5209506/…

Fallenreaper Over a year ago

It seems to render it without"/jpg" or "/png" etc. Im not sure if that is a chrome thing only, or what thought

Guilherme Sehn Over a year ago

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.

Fallenreaper Over a year ago

Thats the perfect answer. :) Thank you.

Ramón Gil Moreno · Accepted Answer · 2013-10-30 18:15:38Z

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, 2013 at 18:15

Ramón Gil Moreno

8296 silver badges20 bronze badges

2 Comments

Fallenreaper Over a year ago

i was trying this (see my edit for my attempts). Does it need to define a type?

Ramón Gil Moreno Over a year ago

You need to define the specific file format of your image after data:image/<format>. For example data:image/png or data:image/jpeg. You can find some reference here: developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related