[X.Form] 呼叫 WebApi 顯示圖片

[WebApi] 下載圖片 完成 WebApi 建置後，該篇要利用 Xamarin 來呼叫 WebApi 並顯示圖片

Xaml 配置

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="ImageDemo.MainPage">

    <StackLayout>

        <Label Text="透過 WebAPI 連線本機 IIS 並顯示圖片" 
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <Button 
                x:Name="BtnClick"
                Text="run"
                FontSize="Large"
                BorderWidth="1"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                Clicked="Button_Clicked"></Button>
        
        <Image
            x:Name="img" 
            Aspect="AspectFit"
            WidthRequest = "480"
            HeightRequest = "640"/>
    </StackLayout>
</ContentPage>

C# Code

namespace ImageDemo
{
    [DesignTimeVisible(false)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void Button_Clicked(object sender, EventArgs e)
        {
            byte[] imageByte = await DownloadImageAsync("http://10.0.2.2:8081/api/image?file=3");
            img.Source = ImageSource.FromStream(() => new MemoryStream(imageByte));
        }

        private async Task<byte[]> DownloadImageAsync(string imageUrl)
        {
            byte[] imageByte;
            using (HttpClientHandler handler = new HttpClientHandler())
            using (HttpClient client = new HttpClient(handler))
            {
                try
                {
                    #region 呼叫遠端 Web API
                    HttpResponseMessage response = null;

                    // 設定相關網址內容
                    response = await client.GetAsync(imageUrl);

                    #endregion

                    #region 處理呼叫完成 Web API 之後的回報結果
                    if (response != null)
                    {
                        if (response.IsSuccessStatusCode == true)
                        {
                            // 重點：Content 利用 ReadAsByteArrayAsync() 取回圖檔 byte
                            return await response.Content.ReadAsByteArrayAsync();
                        }
                        else
                        {
                            imageByte = null;
                        }
                    }
                    else
                    {
                        imageByte = null;
                    }
                    #endregion
                }
                catch
                {
                    imageByte = null;
                }
            }

            return imageByte;
        }        
    }
}

從 iOS 模擬器和 Android 模擬器連線到本機 web 服務 重點

在 Android 模擬器中執行的應用程式可以透過 10.0.2.2 位址連線到本機 HTTP Web 服務，也就是您的主機回送介面 (在開發電腦上為 127.0.0.1) 的別名。 例如，提供一個透過 /api/todoitems/ 相對 URI 公開 GET 作業的本機 HTTP Web 服務，在 Android 模擬器中執行的應用程式就可以透過傳送 GET 要求至 http://10.0.2.2:/api/todoitems/ 來取用作業。

執行結果

• 參考資料
• C# HttpClient WebAPI : 12. 下載圖片檔案到本機儲存空間內