C# 到 JS：如何使用 base64 (RawBytes) 图像格式附加 img src？

Question

我正在尝试将从 API 返回的图像以 bytes 的形式传递到前端以附加到页面。

我不想将图像保存在文件系统中，只是通过这种方式传递。

正在返回响应，但我不知道如何完成此过程。

这是我的 API 电话：

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

我的 js:

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

上面的console.log显示的是：

确认 - 我意识到上面的 img src 是 [object, Object]，这就是图像不显示的原因。但是，您将如何成功完成整个通话？

Answer 1

我能够使用两种方法解决这个问题（两种方法都取决于后端方法稍微改变），其中一种方法使用 RestSharp，另一种方法使用 HttpClient:

解决方案一：

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);

方案二：

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# 到 JS：如何使用 base64 (RawBytes) 图像格式附加 img src？

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

c#

jquery

asp.net-core

httpresponse

rest-client