下载Azure blob并将其设置为图像标签上的数据URL [英] Download Azure blob and set it as data url on an image tag

问题描述

我正在尝试从私有Azure Blob存储容器中下载一个blob，并将其显示在图像标签中.

I'm trying to download a blob from private Azure Blob storage container and display it in an image tag.

在下面的问题上，您可以看到我如何从Web API以Stream格式返回Blob.

On the question below you can see how I'm returning the blob from the Web API in Stream format.

获得尝试在Web API请求上检索Azure Blob时出现403错误

从HTTP响应中，我可以通过将blob的内容类型包含在请求的标头部分中来进行检索.要使用它来生成要在图像标签上使用的数据URI.我知道我需要将Stream转换为base64字符串，以便能够将其包括在图像标签的src属性中.我目前正在努力将HTTP请求的结果转换为base64字符串.

From the HTTP response, I am able to retrieve the content type of the blob by including it on the headers section of the request. To use it to generate the data URI to be used on the image tag. I understand I need to convert the Stream into a base64 string to be able to include it on the src attribute of an image tag. I'm currently struggling to convert the result from the HTTP request into a base64 string.

我创建了这个js小提琴，其中包含从HTTP请求接收的数据(图像)以及将数据转换为base64字符串的尝试:

I have created this js fiddle which contains the data (image) received from the HTTP request along with my attempt to convert the data into a base64 string:

'http://jsfiddle.net/chesco9/6a7ohgho/'

编辑

谢谢汤姆(Tom)的帮助.我能够实施您的解决方案，并且解决了问题.我已经在这个问题上停留了几天了.

Thank you Tom for your help. I was able to implement your solution and it worked out. I had been stuck on this problem for a few days now.

public async Task<AzureBlobModel> DownloadBlob(Guid blobId)
    {
        try
        {
            //get picture record
            Picture file = await _media.GetPictureAsync(blobId);

            // get string format blob name
            var blobName = file.PictureId.ToString() + file.Extension;

            if (!String.IsNullOrEmpty(blobName))
            {
                var blob = _container.GetBlockBlobReference(blobName);

                // Strip off any folder structure so the file name is just the file name
                var lastPos = blob.Name.LastIndexOf('/');
                var fileName = blob.Name.Substring(lastPos + 1, blob.Name.Length - lastPos - 1);

                var fileLength = blob.Properties.Length;
                var stream = await blob.OpenReadAsync();

                MemoryStream ms = new MemoryStream();
                stream.CopyTo(ms);

                var result = new AzureBlobModel()
                {
                    FileName = fileName,
                    FileSize = blob.Properties.Length,
                    Stream = stream,
                    ContentType = blob.Properties.ContentType,
                    StreamBase64 = Convert.ToBase64String(ms.ToArray())
                };

                return result;
            }
        }
        catch(Exception ex)
        {
            await _log.CreateLogEntryAsync("exception thrown: " + ex.ToString());
        }

        await _log.CreateLogEntryAsync("returning null");

        // Otherwise
        return null;
    }

推荐答案

我目前正在努力将HTTP请求的结果转换为base64字符串.

I'm currently struggling to convert the result from the HTTP request into a base64 string.

根据我的理解，现在您可以从Azure存储下载blob. 根据您提到的链接，WebApi返回AzureBlobModel. 我们可以使用C#代码后端轻松地将流转换为base64字符串.您可以在代码中添加以下代码.如果可行，请在AzureBlobModel中返回该值.

Base on my understanding, now you can download the blob from the Azure storage. According to your mentioned link, the WebApi return the AzureBlobModel. We can convert the stream to base64 string easily with C# code backend.You can add following code in your code. If it is prossible, return this value in the AzureBlobModel.

MemoryStream ms = new MemoryStream();
stream.CopyTo(ms);
string strBase64 = Convert.ToBase64String(ms.ToArray());

这篇关于下载Azure blob并将其设置为图像标签上的数据URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！