英文:
Blazor Server: Convert blob locally stored in browser to Base64 String
问题
我正在Blazor Server Net 6中创建一个应用程序。
通过查阅文档，我成功地将图像保存为本地浏览器上的Blob。
图像在浏览器中渲染得很完美。
Blob URL看起来类似于：
blob:https://localhost:7066/94065f17-5b19-47e4-9256-59f3e237a662
现在，我需要将Blob读取为Base64字符串。我尝试使用IHTTPClient，如下所示：
var result = await httpClient.GetStreamAsync(_card.LogoImageDetails.ActualImage);
但是，它抛出了下面的异常。
等待一个有效的解决方案来解决这个问题。
Saad
英文:
I am creating an application in Blazor Server Net 6
I was able to save the image as a blob on the local browser by going through the documentation
https://learn.microsoft.com/en-us/aspnet/core/blazor/images?view=aspnetcore-7.0#stream-image-data
The images are rendering perfectly in the browser
The Blob URL looks something like this
blob:https://localhost:7066/94065f17-5b19-47e4-9256-59f3e237a662
Now, I need to read the blob as a base 64 string. I tried to use IHTTPClient as mentioned below
var result=await httpClient.GetStreamAsync(_card.LogoImageDetails.ActualImage);
But, it throws an exception given below
Waiting for an efficient solution to solve this issue
Regards
Saad
答案1
得分: 0
以下是翻译好的部分：
这是解决方案
创建了如下的JS方法：
const blobToBase64 = async blob => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result)
reader.error = (err) => reject(err)
reader.readAsDataURL(blob)
})
}
window.convertBlobURLToBase64 = async (url) => {
const response = await fetch(url)
const blob = await response.blob();
const imageBase64 = await blobToBase64(blob)
return imageBase64;
}
使用JSInterop获取Base64字符串
private async Task UploadImagesOnBlobAsync()
{
var result = await _jsRunTime.InvokeAsync<string>("convertBlobURLToBase64", _card.LogoImageDetails.ActualImage);
}
英文:
Here is the solution
Created JS methods like this:
const blobToBase64 = async blob => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result)
reader.error = (err) => reject(err)
reader.readAsDataURL(blob)
})
}
window.convertBlobURLToBase64 = async (url) => {
const response = await fetch(url)
const blob = await response.blob();
const imageBase64 = await blobToBase64(blob)
return imageBase64;
}
Use JSInterop to get the base 64 string
private async Task UploadImagesOnBlobAsync()
{
var result=await _jsRunTime.InvokeAsync<string>("convertBlobURLToBase64", _card.LogoImageDetails.ActualImage);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论