crop the image and store online and in settings

src/components/GiftedPhotoDialog.vue

@@ -20,28 +20,54 @@
       </div>
 
       <div v-if="uploading" class="flex justify-center">
-        <fa icon="spinner" class="fa-spin fa-3x text-center block" />
+        <fa
+          icon="spinner"
+          class="fa-spin fa-3x text-center block px-12 py-12"
+        />
       </div>
       <div v-else-if="blob">
-        <div
-          class="flex justify-center gap-2 absolute bottom-[1rem] left-[1rem] right-[1rem] bg-black/50 px-4 py-2"
-        >
+        <div v-if="crop">
+          <VuePictureCropper
+            :boxStyle="{
+              width: '100%',
+              height: '100%',
+              backgroundColor: '#f8f8f8',
+              margin: 'auto',
+            }"
+            :img="URL.createObjectURL(blob)"
+            :options="{
+              viewMode: 1,
+              dragMode: 'crop',
+              aspectRatio: 9 / 9,
+            }"
+          />
+          <!-- This gives a round cropper.
+            :presetMode="{
+              mode: 'round',
+            }"
+          -->
+        </div>
+        <div v-else>
+          <div class="flex justify-center">
+            <img :src="URL.createObjectURL(blob)" class="mt-2 rounded" />
+          </div>
+        </div>
+        <div class="absolute bottom-[1rem] left-[1rem] px-2 py-1">
           <button
             @click="uploadImage"
-            class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white font-bold py-2 px-4 rounded-md"
+            class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-1 px-2 rounded-md"
           >
             <span>Upload</span>
           </button>
+        </div>
+        <div class="absolute bottom-[1rem] right-[1rem] px-2 py-1">
           <button
             @click="retryImage"
-            class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white font-bold py-2 px-4 rounded-md"
+            class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-1 px-2 rounded-md"
           >
             <span>Retry</span>
           </button>
         </div>
-        <div class="flex justify-center">
-          <img :src="URL.createObjectURL(blob)" class="mt-2 rounded" />
-        </div>
       </div>
       <div v-else ref="cameraContainer">
         <!--
@@ -92,6 +118,7 @@
 import axios from "axios";
 import Camera from "simple-vue-camera";
 import { Component, Vue } from "vue-facing-decorator";
+import VuePictureCropper, { cropper } from "vue-picture-cropper";
 
 import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
 import { getIdentity } from "@/libs/util";
@@ -99,13 +126,14 @@ import { db } from "@/db/index";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 
-@Component({ components: { Camera } })
+@Component({ components: { Camera, VuePictureCropper } })
 export default class GiftedPhotoDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   activeDeviceNumber = 0;
   activeDid = "";
   blob: Blob | null = null;
+  crop: boolean;
   mirror = false;
   numDevices = 0;
   setImage: (arg: string) => void = () => {};
@@ -134,8 +162,9 @@ export default class GiftedPhotoDialog extends Vue {
     }
   }
 
-  open(setImageFn: (arg: string) => void) {
+  open(setImageFn: (arg: string) => void, crop?: boolean) {
     this.visible = true;
+    this.crop = !!crop;
     const bottomNav = document.querySelector("#QuickNav") as HTMLElement;
     if (bottomNav) {
       bottomNav.style.display = "none";
@@ -274,6 +303,11 @@ export default class GiftedPhotoDialog extends Vue {
 
   async uploadImage() {
     this.uploading = true;
+
+    if (this.crop) {
+      this.blob = await cropper?.getBlob();
+    }
+
     const identifier = await getIdentity(this.activeDid);
     const token = await accessToken(identifier);
     const headers = {

src/views/AccountViewView.vue

@@ -611,7 +611,7 @@ export default class AccountViewView extends Vue {
   isRegistered = false;
   isSubscribed = false;
   notificationMaybeChanged = false;
-  profileImageUrl: string | null = null;
+  profileImageUrl?: string;
   publicHex = "";
   publicBase64 = "";
   webPushServer = "";
@@ -684,6 +684,7 @@ export default class AccountViewView extends Vue {
       (settings?.firstName || "") +
       (settings?.lastName ? ` ${settings.lastName}` : ""); // pre v 0.1.3
     this.isRegistered = !!settings?.isRegistered;
+    this.profileImageUrl = settings?.profileImageUrl as string;
     this.showContactGives = !!settings?.showContactGivesInline;
     this.showShortcutBvc = !!settings?.showShortcutBvc;
     this.warnIfProdServer = !!settings?.warnIfProdServer;
@@ -1289,10 +1290,14 @@ export default class AccountViewView extends Vue {
   }
 
   openPhotoDialog() {
-    (this.$refs.photoDialog as GiftedPhotoDialog).open((imgUrl) => {
+    (this.$refs.photoDialog as GiftedPhotoDialog).open(async (imgUrl) => {
+      await db.open();
+      db.settings.update(MASTER_SETTINGS_KEY, {
+        profileImageUrl: imgUrl,
+      });
       this.profileImageUrl = imgUrl;
-      console.log("Got image URL:", imgUrl);
-    });
+      //console.log("Got image URL:", imgUrl);
+    }, true);
   }
 
   confirmDeleteImage() {