Base64文字列をイメージに変換し、それをMetro Style AppのGridViewにバインドする方法は？

Question

私はWebサービスからの製品のコレクションを持っていますが、この製品をグリッドビューでプレビューしますが、製品のイメージをBase64文字列として取得します。どのように画像に変換し、グリッドビューの画像にバインドすることができますか？

この問題で私を助けるコードがあります。

Answer 1

WPF/Metro/Silverlightでは、ImageはUIコントロールです。そのソースはBitmapSourceに設定されています。 BitmapSourceは、画像データを保持するデータ構造です。

次に、バイト配列からBitmapImageを取得するコードを示します。 stream.AsRandomAccessStreamはAPIで利用できない

public BitmapImage ImageFromBuffer(Byte[] bytes) 
    { 
     MemoryStream stream = new MemoryStream(bytes); 
     BitmapImage image = new BitmapImage(); 
     image.SetSource (stream.AsRandomAccessStream()); 
     return image; 
    } 

注これは、拡張メソッドです。私がこれに続いてSO question

からIDWMasterの応答から、それを発見したかもしれない（

public static class MicrosoftStreamExtensions 
    { 
     public static IRandomAccessStream AsRandomAccessStream(this Stream stream) 
     { 
      return new RandomStream(stream); 
     } 
    } 
    class RandomStream : IRandomAccessStream 
    { 
     Stream internstream; 
     public RandomStream(Stream underlyingstream) 
     { 
      internstream = underlyingstream; 
     } 
     public IInputStream GetInputStreamAt(ulong position) 
     { 
      internstream.Position = (long)position; 
      return internstream.AsInputStream(); 
     } 

     public IOutputStream GetOutputStreamAt(ulong position) 
     { 
      internstream.Position = (long)position; 
      return internstream.AsOutputStream(); 
     } 

     public ulong Size 
     { 
      get 
      { 
       return (ulong)internstream.Length; 
      } 
      set 
      { 
       internstream.SetLength((long)value); 
      } 
     } 

     public bool CanRead 
     { 
      get { return internstream.CanRead; } 
     } 

     public bool CanWrite 
     { 
      get { return internstream.CanWrite; } 
     } 

     public IRandomAccessStream CloneStream() 
     { 
      //HACK, this is not clone, proper implementation is required, returned object will share same internal stream 
      return new RandomStream(this.internstream); 
     } 

     public ulong Position 
     { 
      get { return (ulong)internstream.Position; } 
     } 

     public void Seek(ulong position) 
     { 
      internstream.Seek((long)position, SeekOrigin.Current); 
     } 

     public void Dispose() 
     { 
      internstream.Dispose(); 
     } 

     public Windows.Foundation.IAsyncOperationWithProgress<IBuffer, uint> ReadAsync(IBuffer buffer, uint count, InputStreamOptions options) 
     { 
      throw new NotImplementedException(); 
     } 

     public Windows.Foundation.IAsyncOperation<bool> FlushAsync() 
     { 
      throw new NotImplementedException(); 
     } 

     public Windows.Foundation.IAsyncOperationWithProgress<uint, uint> WriteAsync(IBuffer buffer) 
     { 
      throw new NotImplementedException(); 
     } 
    } 

最終3つの方法は、私がテストしていませんが、上記の主に動作するはず

に実装されていない拡張メソッドのコードですいくらか洗練された後になる）。

Answer 2

はこのような何か試してみてください：

byte[] encodedDataAsBytes = System.Convert.FromBase64String(encodedData); 
MemoryStream stream = new MemoryStream(encodedDataAsBytes.Length); 
stream.Write(encodedDataAsBytes, 0, encodedDataAsBytes.Length); 
Image img = Image.FromStream(stream); 

を私は地下鉄で働いていないので、私は..グリッドへの結合を 敬具を助けることはできません。

Answer 3

これは私のために働くように見える：私は何を待っていない

public static BitmapImage Base64StringToBitmap(string source) 
    { 
     var ims = new InMemoryRandomAccessStream(); 
     var bytes = Convert.FromBase64String(source); 
     var dataWriter = new DataWriter(ims); 
     dataWriter.WriteBytes(bytes); 
     dataWriter.StoreAsync(); 
     ims.Seek(0); 
     var img = new BitmapImage(); 
     img.SetSource(ims); 
     return img; 
    } 

注意、img.SetSourceが遅れ負荷の世話をする必要があります。以下

Answer 4

Image制御

1. にBase64Stringを結合する方法である

   byte[] bytes = System.Convert.FromBase64String(thebase64string); 
   

2. にするバイト[]画像制御を渡し、次のように[]のバイトに文字列を変換あなたはイメージをバインドする必要があります。

   public async void SetImageFromByteArray(byte[] data, Windows.UI.Xaml.Controls.Image image) 
   { 
       InMemoryRandomAccessStream raStream = 
        new InMemoryRandomAccessStream(); 
   
       DataWriter writer = new DataWriter(raStream); 
   
       // Write the bytes to the stream 
       writer.WriteBytes(data); 
   
       // Store the bytes to the MemoryStream 
       await writer.StoreAsync(); 
   
       await writer.FlushAsync(); 
   
       // Detach from the Memory stream so we don't close it 
       writer.DetachStream(); 
   
       raStream.Seek(0); 
   
       BitmapImage bitMapImage = new BitmapImage(); 
       bitMapImage.SetSource(raStream); 
   
       image.Source = bitMapImage; 
   }