How to get and display image as byte array from database on Windows Phone 8.1

Nurkanat Khametov 发表于 Dev

Mike

I want to get image as byte array from database using local WCF service and display it on a Page using Image control. I cannot make it working.

This is the simplest code just to start… Eventually I want to use binding in XAML.

//I use following code for getting bytes (it’ s working)
private async Task GetPhotoAsync(string code)
    {
        using (var httpClient = new HttpClient())
        {
            using (var request = new HttpRequestMessage(HttpMethod.Get,
                $"http://192.168.0.5/Service/TerminalService.svc/GetPhoto?Code={code}"))
            {
                using (var response = await httpClient.SendAsync(request))
                {
                    if (response.IsSuccessStatusCode)
                    {
                        ImageBuffer = (await response.Content.ReadAsByteArrayAsync());
                    }
                    else
                    {
                        throw new Exception($"Error.{Environment.NewLine}{response}");
                    }
                }
            }
        }
    }

...

public byte[] ImageBuffer
    {
        get { return _imageBuffer; }
        set { SetProperty(ref imageBuffer, value); }
    }

public class BindableObject : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null)
    {
        if (object.Equals(storage, value)) return false;
        storage = value;
        this.OnPropertyChanged(propertyName);
        return true;
    }
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        var eventHandler = this.PropertyChanged;
        if (eventHandler != null) eventHandler(this, new PropertyChangedEventArgs(propertyName));
    }
}

...

//Method used to convert bytes into BitmapImage and set source of control Image.

public async void SetImageFromByteArray(byte[] data, Image image)
    {
        using (InMemoryRandomAccessStream raStream = new InMemoryRandomAccessStream())
        {
            using (DataWriter writer = new DataWriter(raStream))
            {
                // Write the bytes to the stream
                writer.WriteBytes(data);

                // Store the bytes to the MemoryStream
                await writer.StoreAsync();

                // Not necessary, but do it anyway
                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;
        }
    }

When MainPage is loaded I run method GetPhotoAsync(). After a while I set Image.Source by pressing button and run method SetImageFromByteArray(). Nothing is displayed.

I also tried these solutions without success:

with binding properties - https://marcominerva.wordpress.com/2013/04/15/how-to-convert-a-byte-array-to-image-in-a-windows-store-app/
using converter - Windows Phone 8 - Load byte[] array into XAML image with Binding
TaskCompletionNotifier - Async Implementation of IValueConverter

mdziadowiec

You can try this, it works for me.

First you have to set up property in your ViewModel which you bind the Image control to.

public BitmapImage ImageSource 
    { 
        get { return _imageSource; } 
        set { SetProperty(ref _imageSource, value); } 
    }

...

public async Task GetPhotoAsync(string twrKod)
    {
        using (var httpClient = new HttpClient())
        {
            using (var request = new HttpRequestMessage(HttpMethod.Get,
                $"http://192.168.0.5/Service/TerminalService.svc/GetPhoto?Code={code}"))
            {
                using (var response = await httpClient.SendAsync(request))
                {
                    if (response.IsSuccessStatusCode)
                    {
                        var imageStream = await response.Content.ReadAsStreamAsync();

                        var memStream = new MemoryStream();
                        await imageStream.CopyToAsync(memStream);
                        memStream.Position = 0;
                        var bitmap = new BitmapImage();
                        bitmap.SetSource(memStream.AsRandomAccessStream())
                        ImageSource = bitmap;
                    }

                }
            }
        }
    }

Make sure you have MemoryStream to be return type of WCF Service. For example:

public Stream GetPhoto(string code)
   {
        byte[] bytes = null;
        var myCommand = new SqlCommand())
        myCommand.Connection = new SqlConnection(Settings.Default.ConnectionString);
        objSql.ObjCommand.CommandText = "dbo.GetPhotoProc";
        objSql.ObjCommand.CommandType = CommandType.StoredProcedure;
        objSql.ObjCommand.Parameters.Add("@code", SqlDbType.NVarChar).Value = code;

        objSql.Reader = objSql.ObjCommand.ExecuteReader();

        if (!objSql.Reader.HasRows) return null;
        while (objSql.Reader.Read())
        {
            bytes = (byte[])objSql.Reader.GetValue(0);
        }
        if (bytes == null) return Stream.Null;
        var ms = new MemoryStream(bytes) { Position = 0 };

        if (WebOperationContext.Current != null)
            WebOperationContext.Current.OutgoingResponse.ContentType = "image/jpeg";
        return ms;
    }

Interface for WCF

[WebGet(UriTemplate = "GetPhoto?Code={code}", RequestFormat = WebMessageFormat.Xml, ResponseFormat = WebMessageFormat.Xml, BodyStyle = WebMessageBodyStyle.Bare)]
    [OperationContract]
    Stream GetPhoto(string code);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。