C＃到JS：如何添加與base64（RawBytes）圖像格式img src？

我試圖將從bytes的形式的API返回的圖像傳遞到前端以追加到頁面。C＃到JS：如何添加與base64（RawBytes）圖像格式img src？

我不要想要保存圖像在文件系統，只是通過這種方式傳遞。

響應正在返回，但我失去了如何完成此過程。

這裏是我的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]，這就是爲什麼圖像不顯示。但是，你將如何成功完成整個呼叫？

來源

2017-07-11 NoReceipt4Panda

當然，你需要與r修改一個base64字符串：'Convert.ToBase64String（restResponse.RawBytes）' - 你不能將原始二進制數據填充到data：image/png; base64，' –

@AlexK。我改成了'response.Content = new StringContent（restResponse.RawBytes）;'但仍然有''不能從byte []轉換爲彈出'restResponse.RawBytes'的字符串錯誤。 – NoReceipt4Panda

'new StringContent（Convert.ToBase64String（restResponse.RawBytes））;'？ –

我能夠解決這個使用兩種方式（既依賴於後端方法的改變的位），其中的一種方式是使用RestSharp，另一個用於HttpClient：

解決方案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);

解決方案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;

來源

2017-08-14 17:38:57 NoReceipt4Panda

C＃到JS：如何添加與base64（RawBytes）圖像格式img src？

回答

相關問題