先說結論!!! 先說結論!!! 先說結論!!!
結論這篇比我想像中難，中間遇到了一些我對於 Capacitor 跟 cordova 套件的不了解。
我本來想要用 cordova-plugin-camera 這個套件的，但是似乎在 ionic Capacitor Project 的時候，在 Android Studio 遇到了些詭異的問題 error: package android.support.v4.content does not exist import android.support.v4.content.FileProvider; 。
去了 cordova-plugin-camera 的 github issue 看了一下，作者只表示: Ionic Capacitor is not Cordova. If you have an issue with Ionic Capacitor please contact Ionic for support.
整個晴天霹靂阿! 所以我整個砍掉，使用 Capacitor API 。

Day 14 JwtModule 我們寫了使用者資訊頁面。
這次來練練用 Camera 去更新大頭照。

準備後端相關的 API

我修改了登入之後，回傳給前端的使用者資訊，多加了個 ImageUrl，而這個圖片的連結本身也是一隻 API

api/Demo3/GetUserAvatar
接著建立取得大頭照API，特別注意這隻API 是對外開放的，純粹是因為我不知道如何在 ion-img 元件 src 中在 Header 加入 Token 。 另外要在 ASP.NET Web API 目錄下新增一個 Images 的資料夾，放置圖檔，預設圖片 default.jpg。

api/Demo3/UploadAvatar
建立上傳大頭照API，這邊會接受從前端回傳的圖片 base64，然後把他轉成圖檔存在 Images 資料夾中，然後以 userName 名稱命名。
中間有一段純粹是回傳回來的 base64 似乎要做些調整才能放入 Convert.FromBase64String 中轉成 byte 陣列。
這邊純粹是我對於 base64 不熟，目前先應急的寫法。

這是負責接上傳大頭照API的 Model

    public class UploadAvatarModel
    {
        public string userName { get; set; }
        public string base64 { get; set; }
    }

實作 Camera 更新大頭照

建立上 UploadAvatarModel 打上傳大頭照API用

user-info.page.html 建立一個 button

user-info.page.html 調整一下 css

user-info.page.ts 上半部

主要是宣告 Camera ，特別注意他是 Capacitor API ，不是 cordova。
在 Day 14 JwtModule 中 ImageUrl 是寫死的， 改從 jwtModule 取得。 而他主要就會去打 api/Demo3/GetUserAvatar API 。

最主要也最重要的方法 addPhotoToGallery()

主要藉由 Camera.getPhoto 去叫用相機。
拍完之後 fetch 到 FileReader reader.onload 那端是把圖片路徑轉成 base64 最後打 api/Demo3/UploadAvatar API 上傳大頭照。

this.user.imageUrl = this.user.imageUrl + '&' + Date.now(); 這邊加 Date.now() 主要是讓網址不同，才會去更新 ion-img 元件。

結果