🐛 Fix cannot read image in some browser

src/views/users/me/personalize.vue

@@ -38,6 +38,7 @@
     </v-card>
 
     <v-card>
+      <section v-if="canEditImage">
       <v-card-text class="flex items-center gap-3">
         <v-avatar
           color="grey-lighten-2"
@@ -49,7 +50,7 @@
         <v-file-input
           clearable
           hide-details
-          label="Upload another avatar"
+          label="New Avatar"
           variant="outlined"
           density="comfortable"
           accept="image/*"
@@ -70,7 +71,7 @@
         <v-file-input
           clearable
           hide-details
-          label="Update your banner"
+          label="New Banner"
           variant="outlined"
           density="comfortable"
           accept="image/*"
@@ -78,6 +79,14 @@
           @input="(val: InputEvent) => loadImage(val, 'banner')"
         />
       </v-card-text>
+      </section>
+
+      <v-card-text v-else>
+        <v-alert variant="tonal" type="info" class="text-sm">
+          Due to limitations of some browsers (such as Safari). You cannot edit your personal images in this browser.
+          We recommend Chrome or any Chromium-based browser. You can also use a PWA for a better experience!
+        </v-alert>
+      </v-card-text>
     </v-card>
 
     <v-bottom-sheet class="max-w-[480px]" v-model="cropping">
@@ -90,7 +99,7 @@
             :stencil-props="{ aspectRatio: image.ratio }"
           />
         </div>
-        <v-card-actions>
+        <v-card-actions class="pb-16">
           <v-spacer></v-spacer>
 
           <v-btn color="grey-darken-3" @click="cropping = false">Cancel</v-btn>
@@ -123,6 +132,8 @@ const image = ref<any>({
 const cropper = ref<any>()
 const cropping = ref(false)
 
+const canEditImage = computed(() => navigator.userAgent.toLowerCase().indexOf("safari") > -1)
+
 watch(
   id.userinfo,
   (val) => {
@@ -200,8 +211,12 @@ async function applyImage() {
   const payload = new FormData()
   payload.set(image.value.type, await new Promise<Blob>((resolve, reject) => {
     canvas.toBlob((data: Blob | null) => {
-      if (data == null) reject("Cannot get blob data")
-      else resolve(data)
+      if (data == null) {
+        showErrorSnackbar("Cannot get blob data through canvas, please try again in desktop browser.")
+        reject("Cannot get blob data")
+      } else {
+        resolve(data)
+      }
     })
   }))