Azure blobをダウンロードし、画像タグにデータURLとして設定します。

Question

私はAzure Blobストレージコンテナからブロブをダウンロードし、画像タグに表示しようとしています。

以下の質問では、Web APIからストリーム形式でBLOBを返す方法を確認できます。

Getting 403 error when trying to retrieve an Azure blob on Web API request

HTTPレスポンスから、私はリクエストのヘッダ部に含めることによって、ブロブのコンテンツタイプを取得することができています。それを使用して、イメージタグで使用されるデータURIを生成します。イメージタグのsrc属性にストリームを含めるには、ストリームをbase64文字列に変換する必要があることを理解しています。私は現在、HTTPリクエストからの結果をbase64文字列に変換するのに苦労しています。

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

EDIT

感謝：

私は、これはデータ（画像）はbase64文字列にデータを変換する私の試みと一緒にHTTPリクエストから受け取っ含まフィドルをJS作成しましたあなたはトムあなたの助けになります。私はあなたのソリューションを実装することができました。私は数日間この問題に立ち往生していました。

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

Answer 1

私は現在、base64文字列にHTTPリクエストからの結果を変換するために苦労しています。

私の理解に基づいて、AzureストレージからBLOBをダウンロードできるようになりました。 上記のlinkによれば、WebApiはAzureBlobModelを返します。 ストリームをC＃コードのバックエンドでbase64文字列に簡単に変換できます。コードに次のコードを追加できます。実行可能な場合は、AzureBlobModelでこの値を返します。

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