Hydrogen/SolarAgent
Hydrogen/SolarAgent
Archived
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

🐛 Fix cannot read image in some browser

Browse Source
This commit is contained in:
LittleSheep 2024-04-05 11:45:54 +08:00
parent b6f50bbf53
commit 3a42c58013
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/users/me/personalize.vue
View File

@ -38,6 +38,7 @@
</v-card> </v-card>
<v-card> <v-card>
<section v-if="canEditImage">
<v-card-text class="flex items-center gap-3"> <v-card-text class="flex items-center gap-3">
<v-avatar <v-avatar
color="grey-lighten-2" color="grey-lighten-2"
@ -49,7 +50,7 @@
<v-file-input <v-file-input
clearable clearable
hide-details hide-details
label="Upload another avatar" label="New Avatar"
variant="outlined" variant="outlined"
density="comfortable" density="comfortable"
accept="image/*" accept="image/*"
@ -70,7 +71,7 @@
<v-file-input <v-file-input
clearable clearable
hide-details hide-details
label="Update your banner" label="New Banner"
variant="outlined" variant="outlined"
density="comfortable" density="comfortable"
accept="image/*" accept="image/*"
@ -78,6 +79,14 @@
@input="(val: InputEvent) => loadImage(val, 'banner')" @input="(val: InputEvent) => loadImage(val, 'banner')"
/> />
</v-card-text> </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-card>
<v-bottom-sheet class="max-w-[480px]" v-model="cropping"> <v-bottom-sheet class="max-w-[480px]" v-model="cropping">
@ -90,7 +99,7 @@
:stencil-props="{ aspectRatio: image.ratio }" :stencil-props="{ aspectRatio: image.ratio }"
/> />
</div> </div>
<v-card-actions> <v-card-actions class="pb-16">
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn color="grey-darken-3" @click="cropping = false">Cancel</v-btn> <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 cropper = ref<any>()
const cropping = ref(false) const cropping = ref(false)
const canEditImage = computed(() => navigator.userAgent.toLowerCase().indexOf("safari") > -1)
watch( watch(
id.userinfo, id.userinfo,
(val) => { (val) => {
@ -200,8 +211,12 @@ async function applyImage() {
const payload = new FormData() const payload = new FormData()
payload.set(image.value.type, await new Promise<Blob>((resolve, reject) => { payload.set(image.value.type, await new Promise<Blob>((resolve, reject) => {
canvas.toBlob((data: Blob | null) => { canvas.toBlob((data: Blob | null) => {
if (data == null) reject("Cannot get blob data") if (data == null) {
else resolve(data) showErrorSnackbar("Cannot get blob data through canvas, please try again in desktop browser.")
reject("Cannot get blob data")
} else {
resolve(data)
}
}) })
})) }))