WebAPIコールから画像を表示

Question

私の.Netバックエンドサービスで画像を生成し、System.Drawing.Imageオブジェクトを使用しています。私はWebAPIメソッドを呼び出して画像をレンダリングし、画像をフロントエンドに戻して表示したいと思います。

は、私はのような何かを行うことができる方法があります：

はself.Image = ko.observable（）;

そしては（戻り値の型がどうなるかわからない）self.Imageに、私のWEBAPI呼び出しから画像をロードします。

そして？

Answer 1

私はそれを働いた：

[Route("Preview"), HttpPost] 
     public string Preview(PlateTemplateExtendedDto data) 
     { 
      var img = new PlateService().CreateTemplate(true); 
      using (var ms = new MemoryStream()) 
      { 
       img.Save(ms, ImageFormat.Jpeg); 
       var base64 = "data:image/jpeg;base64," + Convert.ToBase64String(ms.ToArray()); 
       return base64; 
      } 
     } 

をそして視野に、私はちょうどソースとしてそのテキストを使用します。

<img data-bind="attr:{src: image}" class="img-responsive" style="margin: 0 auto;" /> 

Answer 2

実際はかなり簡単です。 attrバインディングを使用して、任意のhtml属性をバインドできます。ここでは、ボタンを使用して、イメージをロードするために必要なもの（ajaxが含まれています）を実行するサンプルを示します。あなたのイメージが戻ってくるかどうかは分かりませんが、確かにデータURLを使用してsrcとしてバインドできます。

function viewModel() { 
 
    var self = this; 
 
    self.Image = ko.observable(); 
 

 
    self.LoadImage = function() { 
 
    // Ajax stuff 
 
    self.Image("http://lorempizza.com/200/200"); 
 
    } 
 

 
} 
 
ko.applyBindings(new viewModel())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<img data-bind="attr: {src: Image} "> 
 

 
<button data-bind="click: LoadImage">Load Image </button>