C# to JS: How to append img src with base64 (RawBytes) image format?

Question

I'm trying to pass an image returned from an API in the form of bytes to the front end to append to the page.

I do NOT want to save the image in the file system, just passing it through this way.

The response is getting returned, but I'm lost as to how to complete this procedure.

Here's my API call:

[HttpGet("api/GetCamImages")]
public async Task<HttpResponseMessage> ImageFromPath()
{
    RestClient client = new RestClient("http://MYIPADDRESS/cgi-bin/snapshot.cgi?channel=0");
    RestRequest request = new RestRequest(Method.GET);
    request.AddHeader("cache-control", "no-cache");
    request.AddHeader("authorization", "Basic YLKHSouHSSUGh2");
    TaskCompletionSource<IRestResponse> taskCompletion = new TaskCompletionSource<IRestResponse>();

    RestRequestAsyncHandle handle = client.ExecuteAsync(request, r => taskCompletion.SetResult(r));
    RestResponse restResponse = (RestResponse)(await taskCompletion.Task);
    StringContent myContent = new StringContent(Convert.ToBase64String(restResponse.RawBytes));

    var response = new HttpResponseMessage(System.Net.HttpStatusCode.OK);

    response.Content = myContent;
    response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("image/png");

    return response;
}

My js:

 $http.get('/api/GetCamImages').then(function (response) {
    console.log(response.data);
    $("#imgContainer").append('<img src="data:image/png;base64,' + response.data.content + '" />');
});

The console.log above is displaying this:

To confirm - I realize that the img src above is coming though as [object, Object], which is why the image doesn't show. But how would you do this entire call successfully?

Surely you need to return a base64 string: `Convert.ToBase64String(restResponse.RawBytes)` - you cannot stuff raw binary data onto `data:image/png;base64,` — Alex K., Jul 11 '17 at 16:27
@AlexK. I changed to `response.Content = new StringContent(restResponse.RawBytes);` but there's still a `cannot convert from byte[] to string` error popping up for the `restResponse.RawBytes`. — LatentDenis, Jul 11 '17 at 16:33
`new StringContent(Convert.ToBase64String(restResponse.RawBytes));` ? — Alex K., Jul 11 '17 at 16:37
@AlexK. I went ahead and altered to your suggestion, updated the question - still no luck. Getting the same error. — LatentDenis, Jul 11 '17 at 17:56
Instead of serving up the file contents via a WebAPI, how about just allowing to web server to serve up the images as a regular image URL? — Sam Axe, Jul 11 '17 at 19:10
@SamAxe - no can do, the URL requires authentication, and the user/pass cannot be exposed via client-side. — LatentDenis, Jul 11 '17 at 19:13
@MichalHainc I tried to change to `text/plain` but the return I get is still `[object, Object]` — LatentDenis, Jul 12 '17 at 13:17

score 0 · Accepted Answer · answered Aug 14 '17 at 17:38

I was able to solve this using two ways (both depended on the back end method being altered a bit), where one way was using RestSharp, and the other used HttpClient:

Solution 1:

RestClient client = new RestClient("http://MYIPADDRESS/cgi-bin/snapshot.cgi?channel=0");
RestRequest request = new RestRequest(Method.GET);
request.AddHeader("cache-control", "no-cache");
request.AddHeader("authorization", "Basic YLKHSouHSSUGh2");
TaskCompletionSource<IRestResponse> taskCompletion = new TaskCompletionSource<IRestResponse>();
RestRequestAsyncHandle handle = client.ExecuteAsync(request, r => taskCompletion.SetResult(r));
response = (RestResponse)await taskCompletion.Task;

return "data:image/png;base64," + Convert.ToBase64String(response.RawBytes);

Solution 2:

HttpClient client = new HttpClient();
var byteArray = Encoding.ASCII.GetBytes("username:password");
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", Convert.ToBase64String(byteArray));
HttpResponseMessage response = await client.GetAsync("http://MYIPADDRESS/cgi-bin/snapshot.cgi?channel=0");
byte[] myBytes = await response.Content.ReadAsByteArrayAsync();
string convertedFromString = Convert.ToBase64String(myBytes);

return "data:image/png;base64," + convertedFromString;

C# to JS: How to append img src with base64 (RawBytes) image format?

1 Answers1