base64 string from ajax response to img tag

Question

I have a WCF service which returns a base64 string equivalent of a bitmap image.

return Convert.ToBase64String(ImgBytes);

I am using ajax to invoke this service. The code is something like.,

jQuery.ajax({
     url: MY_SERVICE_URL,
     type: "GET",
     dataType: "html",
     success: AjaxSucceeded,
     error: AjaxFailed
});

function AjaxSucceeded(result, textStatus, request) {
    var binary = "";
    var responseText = request.responseText;
    var responseTextLen = responseText.length;

    for (i = 0; i < responseTextLen; i++) {
         binary += String.fromCharCode(responseText.charCodeAt(i) & 255);
    }

    $("#myimage").attr("src", "data:image/jpg;base64," + btoa(binary));
}

But i am not able to see any image.

Also i have tried using dataType as "text".

I have tried printing the data I am assigning to the src of the img tag. And i used that data here, where i am able to see the image.

Also i am able to view the image if i hard code the response value like.,

document.getElementById("myimage").src = "data:image/jpg;base64," + "Qk02EA4AAA...."

I have tried searching various forums. But unfortunately I am not able to figure this out. Am i missing something?

Thanks in advance.

What is happening in `AjaxSucceeded`. And are you sure you are getting data from `MY_SERVICE_URL`? — VDWWD, Oct 25 '16 at 20:39
@VDWWD: yes.. i am very sure about it. i am able to log the response value and use the same in "http://jsfiddle.net/bYGum/" — sam, Oct 25 '16 at 20:43
It appears as if you are taking a base64 string and converting its byte values into base64, which would not be useful. Have you tried `$("#myimage").attr("src", "data:image/jpg;base64," + response.text);` ? — traktor, Oct 25 '16 at 21:16
It works for setting the `src` of an image element using "GetCurrentFrameResult" text copied from your log at "dropbox.com/s/3gmcr2lx22pdjaj/responseLog.txt?dl=0", a US flag eagle on black background. Does the jquery code work using a valid data URL? — traktor, Oct 25 '16 at 21:32
of course it does. you don't want to convert base64 to base64 twice. — traktor, Oct 25 '16 at 21:53

score 1 · Answer 1 · answered Oct 25 '16 at 20:47

1

If you are using jquery, you should use like this

$("#myimage").attr("src","data:image/jpg;base64," + "Qk02EA4AAA....")

answered Oct 25 '16 at 20:47

Charles Stein

126
1
7

that works only if i use "data:image/jpg;base64," + "Qk02EA4AAA...." . But it fails if i use "data:image/jpg;base64," + btoa(binary) as in "http://stackoverflow.com/questions/13908019/display-image-in-src-tag-with-response-text-not-base64" – sam Oct 25 '16 at 20:52
Can I see the full wcf response? – Charles Stein Oct 25 '16 at 20:58
please find the log in "https://www.dropbox.com/s/3gmcr2lx22pdjaj/responseLog.txt?dl=0" – sam Oct 25 '16 at 21:08
try to use dataType:"json" in ajax and the success method use data.GetCurrentFrameResult – Charles Stein Oct 25 '16 at 22:18

score 0 · Answer 2 · answered Oct 25 '16 at 22:15

You can also use this much shorter snippet.

$.get(MY_SERVICE_URL, function (base64string) {
    $("#myimage").attr("src", "data:image/jpg;base64," + base64string);
});

Assuming MY_SERVICE_URL only sends the exact result from return Convert.ToBase64String(ImgBytes); > /9j/4AAQSkZJRgABAQEASABIAAD/2wBD....

score 0 · Answer 3 · answered Oct 26 '16 at 05:42

Thank you guys for the support. I was able to get through it.

This is what I did .,

jQuery.ajax({
     url: MY_SERVICE_URL,
     type: "GET",
     dataType: "json",
     success: AjaxSucceeded,
     error: AjaxFailed
});

function AjaxSucceeded(response) {
    $("#myimage").attr("src", "data:image/jpg;base64," + Response.GetCurrentFrameResult);
}

base64 string from ajax response to img tag

3 Answers3