C# zu JS: Wie img src mit base64 (RawBytes) Bildformat anhängen?

Question

Ich versuche, ein Bild von einer API in Form von bytes an das Front-End zurückgegeben, um an die Seite anzuhängen.

I nicht möchten Sie das Bild im Dateisystem speichern, nur durch diesen Weg.

Die Antwort wird zurückgegeben, aber ich bin verloren, wie dieser Vorgang abgeschlossen wird.

Hier ist meine API-Aufruf:

[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; 
} 

Meine js:

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

Die console.log darüber angezeigt wird:

Um zu bestätigen, - Ich stelle fest, dass die img src oben kommt aber als [object, Object], weshalb das Bild nicht angezeigt wird. Aber wie würdest du diesen ganzen Anruf erfolgreich machen?

Answer 1

Ich konnte dies unter Verwendung von zwei Arten lösen (beide auf dem Back-End-Verfahren abhing ein wenig verändert wird), wobei ein Weg RestSharp wurde mit und die andere verwendet HttpClient:

Lösung 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); 

Lösung 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;