iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 28
1
Cloud

Xamarin.Forms, ASP.NET Core WEB API搭配AZURE服務與資料庫服務整合應用實例系列 第 28

Day28 – Xamarin.Forms新增打卡資料 Part2加入拍照上傳與相簿上傳功能

完成打卡功能之後, 繼續開發拍照上傳與相簿上傳功能, 一樣感謝大神James, 他老兄也寫了個Media Plugin for Xamarin and Windows, Github位置如下
https://github.com/jamesmontemagno/MediaPlugin

在NuGet搜尋Xam.Plugin.Media後安裝
http://ithelp.ithome.com.tw/upload/images/20170111/20103333DxaJi12d0C.png

另外在IOS要取得相機, 相簿或麥克風, 需在加入NSCameraUsageDescription 與 NSPhotoLibraryUsageDescription, 根據James說明如下
http://ithelp.ithome.com.tw/upload/images/20170111/20103333EJAci79kwH.png

所以到IOS專案下找到 Info.plist如下, 用筆記本打開修改, 修改完成後如下
http://ithelp.ithome.com.tw/upload/images/20170111/20103333ON6CiIE6sN.png

最後要將照片上傳至之前寫好的WEB API, 再轉傳到Azure Storage服務, 後來發現Xamarin.Forms可以直接整合Azure Storage服務, 就打算直接叫用, 不再過一手了, 到NuGet搜尋Windows.Azure.Storage如下, 然後安裝
http://ithelp.ithome.com.tw/upload/images/20170111/201033338BNAtGpeqh.png

沒想到Portable專案無法安裝/images/emoticon/emoticon04.gif, IOS專案卻是順利安裝
http://ithelp.ithome.com.tw/upload/images/20170111/20103333Rl92JkFXVd.png

因為IOS專案已經安裝, 所以直接找Package下的dll加入參考
http://ithelp.ithome.com.tw/upload/images/20170111/201033337RpYH76b2I.png

接著打開config.cs加入Azure Storage服務連線字串
http://ithelp.ithome.com.tw/upload/images/20170111/20103333Sy0OnvUBgY.png

打開CheckInAddPage.xaml, 將程式碼修改如下
http://ithelp.ithome.com.tw/upload/images/20170111/20103333j1XHRCnPXV.png

打開CheckInAddPage.xaml.cs, 加入底下參考
...
using Plugin.Media;
using Plugin.Media.Abstractions;
using Microsoft.WindowsAzure.Storage;
using Microsoft.Identity.Client;
...
宣告一個AuthenticationResult, 並在建構式將之傳入
http://ithelp.ithome.com.tw/upload/images/20170111/20103333GL3F6MdQuc.png

新增一個PickPhoto_Clicked函式如下, 當Pick Photo按鈕按下時, 可以打開相簿選擇圖片
http://ithelp.ithome.com.tw/upload/images/20170111/20103333gdxUDNN4y9.png

新增一個TakePhoto_Clicked函式如下, 當Take Photo按鈕按下時, 可以打開相機照相
http://ithelp.ithome.com.tw/upload/images/20170111/201033338vpmNqoNBP.png

新增一個UploadFileToAzure()函式如下, 用來將檔案上傳至Azure Storage服務
http://ithelp.ithome.com.tw/upload/images/20170111/201033337EfPyzj3ye.png

修改btnAdd_Clicked函式, 加入上傳檔案功能與最後完成所有動作後, 跳回主畫面
http://ithelp.ithome.com.tw/upload/images/20170111/20103333E6chKVHc29.png

打開MainPage.xaml.cs, 修改一下Add New CheckIn按鈕的傳入參數
http://ithelp.ithome.com.tw/upload/images/20170111/20103333u4ctjSsVVf.png

由於拍照這個功能, 一定要部署到實機, 才能測試, 底下就是按下Pick Photo的畫面, 直接選擇相簿裡的相片
http://ithelp.ithome.com.tw/upload/images/20170111/20103333QmyhOVEGRc.png

完成後如下
http://ithelp.ithome.com.tw/upload/images/20170111/20103333v5vb51fw4h.png

底下是按下Take Photo, 取得的照片
http://ithelp.ithome.com.tw/upload/images/20170111/20103333ImwgftCyuN.png

最後檢查是否上傳到Azure Storage?
http://ithelp.ithome.com.tw/upload/images/20170111/20103333iw26vEZZMj.png

到這裡應該是打完收工, 但是天有不測風雲啊/images/emoticon/emoticon20.gif, 試著將照片從Azure Storage下載下來打開,
http://ithelp.ithome.com.tw/upload/images/20170111/20103333vz6AEfntMD.png

WTF, 傳上去卻打不開, 只好猜想是不是檔案大小有關? 開始亂試調整影像大小, 終於調出一個100k上下左右的版本, 可以正常打開如下
http://ithelp.ithome.com.tw/upload/images/20170111/20103333FDOtdQYnJO.png

程式碼修改如下, 主要就是設定CompressionQuality
http://ithelp.ithome.com.tw/upload/images/20170111/20103333gV3jS4B19W.png

後記: 為了調整影像大小, 搞到自己覺得會斷賽了/images/emoticon/emoticon38.gif, 還有兩篇啊


上一篇
Day27 – Xamarin.Forms新增打卡資料 Part1加入GPS打卡功能
下一篇
Day29 – Xamarin.Forms整合Google Map顯示打卡資料 Part1
系列文
Xamarin.Forms, ASP.NET Core WEB API搭配AZURE服務與資料庫服務整合應用實例32

尚未有邦友留言

立即登入留言