戻りDBから画像および.NET APIとAngularJSと表示

Question

私はバイナリイメージを取得することで、簡単なタスクを達成したい、と私のhtmlに表示

パブリッククラスアートワーク

{ 
    [Key] 
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)] 
    public Guid artworkID { get; set; } 
    public string artworkName { get; set; } 
    public string artworkMimeType { get; set; } 
    public byte[] artworkMeta { get; set; } 
    public string artworkBase64String { get; set; } 
} 

DB

public Artwork GetArtwork(Guid id) 
    { 
     return _context.Artworks.SingleOrDefault(a => a.artworkID == id); 
    } 

APIコントローラからアートワークを取得します

public IHttpActionResult Get(Guid id) 
     { 
      if (id == null) 
      { 
       return BadRequest(); 
      } 
      var artwork = _repository.GetArtwork(id); 
      if (artwork == null) 
       return NotFound(); 
      else 
       return Ok(artwork); 
     } 

私もこのメソッドを使用して、私が望むデータを返しますが、私はそれを使って目標を達成する方法をまだ分かりません。

[HttpGet] 
    public HttpResponseMessage Get(Guid id) 
    { 
     HttpResponseMessage result = null; 
     try 
     { 
      var artwork = _repository.GetArtwork(id); 

      if (artwork == null) 
      { 
       result = Request.CreateResponse(HttpStatusCode.Gone); 
      } 
      else 
      { 
       // sendo file to client 
       byte[] bytes = artwork.artworkMeta ; 


       result = Request.CreateResponse(HttpStatusCode.OK); 
       result.Content = new ByteArrayContent(bytes); 
       result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment"); 
       result.Content.Headers.ContentDisposition.FileName = artwork.artworkName; 
      } 

      return result; 
     } 
     catch (Exception ex) 
     { 
      return Request.CreateResponse(HttpStatusCode.Gone); 
     } 
    } 

そして、ここで私の角度要求

$scope.getCity = function (id) { 
      $http.get('/api/artwork/' + $RouteParams.id).success(function (response) { 
       $scope.artwork= response; 
       //I've seen dudes using Blob here, but I'm not sure how that works 
      }); 
     } 

だ私の問題は、私はこれを行うことなく、アートワークを表示するのですか、私の角度の要求と私のhtmlです：

<img ng-src="data:{{artwork.artworkartworkMimeType}};base64,{{artwork.artworkBase64String}}" class="img-responsive" /> 

これは、画像を表示しますしかし、私はそれがどのように不器用なのが好きではない、私はオーディオファイルでも作業するつもりですので、私はきれいで理解可能な方法が必要です。助けてください！

Answer 1

あなたが言ったように、これは、BLOBを使用して行うことができます。

最初のステップは、あなたが応答からブロブを作成し、クライアントの要求を追加するAPIメソッド

[HttpGet] 
public HttpResponseMessage Get(Guid id) 
{ 
    HttpResponseMessage result = null; 
    try 
    { 
     var artwork = _repository.GetArtwork(id); 
     if (artwork == null) 
     { 
      result = Request.CreateResponse(HttpStatusCode.Gone); 
     } 
     else 
     { 
      // sendo file to client 
      byte[] bytes = artwork.artworkMeta ; 
      result = Request.CreateResponse(HttpStatusCode.OK); 
      result.Content = new ByteArrayContent(bytes); 
      result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment"); 
      result.Content.Headers.ContentDisposition.FileName = artwork.artworkName; 
      result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); 
     } 

     return result; 
    } 
    catch (Exception ex) 
    { 
     return Request.CreateResponse(HttpStatusCode.Gone); 
    } 
} 

にapplication/octet-streamにコンテンツタイプを設定することです。 IMG

$scope.fileURL = ''; 
$http({ 
    method: 'GET', 
    url: '/api/artwork/' + $RouteParams.id, 
    responseType: 'arraybuffer', 
    headers: { 
     'Access-Control-Allow-Origin': '*', 
    } 
}).success(function (data, status, headers) { 
    headers = headers(); 
    var contentType = headers['content-type']; 
    var blob = new Blob([data], { type: contentType }); 
    //Create a url to the blob 
    $scope.fileURL = window.URL.createObjectURL(blob); 

}).error(function (message) { 
    console.log(message); 
}); 

のソースになりますブロブがその後ngSrc

<img ng-src="{{fileURL}}" class="img-responsive" /> 

Answer 2

イメージをbase64にエンコードせずにバイナリ形式で保存することができます。その後、DBから画像を取得する方が簡単です。あなたのASPコントローラで ：

[HttpGet] 
    public FileResult GetPhoto(int id) { 

     return File(_repository.GetArtwork(id).artworkMeta, "image/jpg"); 

    } 

と角ビューでは：

<img ng-src="/Home/GetPhoto/2" />