Как преобразовать строку Base64 в изображение, а затем привязать ее к GridView в приложении Metro Style?

Question

У меня есть коллекция продуктов из веб-сервиса, я просматриваю этот продукт в режиме Grid View, но получаю изображения продуктов как строки Base64. Как я могу преобразовать его в изображения и привязать его к изображениям в режиме сетки?

Любой фрагмент кода, который поможет мне в этом выпуске.

Answer 1

В WPF/Metro/Silverlight изображение является элементом управления пользовательского интерфейса. Его источник установлен в BitmapSource. BitmapSource - это структура данных для хранения данных изображения.

Ниже приведен код для извлечения BitmapImage из массива байтов.

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

Обратите внимание, что stream.AsRandomAccessStream недоступен в API. Это метод расширения. Я нашел его от ответа IDWMaster к этому SO question

Ниже приводится код для метода расширения

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

ниже метод, который связывает Base64String к Image управления

1. преобразовать строку в Byte [] следующим образом

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