mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-18 00:34:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

show hint while loading the image

Browse Source
This commit is contained in:
MaysWind
2025-09-29 19:19:35 +08:00
parent 564c9e1d95
commit 46dd2888a6
16 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/desktop/transactions/list/dialogs/AIImageRecognitionDialog.vue
+9 -2
View File
@@ -15,8 +15,9 @@
@drop.prevent="onDrop">
<div class="d-flex w-100 fill-height justify-center align-center justify-content-center px-4"
:class="{ 'dropzone': true, 'dropzone-dragover': isDragOver }" style="height: 480px">
<h3 class="pa-2 bg-grey-200" v-if="!imageFile && !isDragOver">{{ tt('Drag and drop a receipt or transaction image here, or click to select one') }}</h3>
<h3 class="pa-2 bg-grey-200" v-if="isDragOver">{{ tt('Release to load image') }}</h3>
<h3 class="pa-2 bg-grey-200" v-if="!loading && !imageFile && !isDragOver">{{ tt('Drag and drop a receipt or transaction image here, or click to select one') }}</h3>
<h3 class="pa-2 bg-grey-200" v-if="!loading && isDragOver">{{ tt('Release to load image') }}</h3>
<h3 class="pa-2" v-if="loading">{{ tt('Loading image...') }}</h3>
</div>
<v-img height="480px" :class="{ 'cursor-pointer': !loading && !recognizing && !isDragOver }"
:src="imageSrc" @click="showOpenImageDialog">
@@ -85,12 +86,18 @@ const imageSrc = ref<string | undefined>(undefined);
const isDragOver = ref<boolean>(false);
function loadImage(file: File): void {
loading.value = true;
imageFile.value = null;
imageSrc.value = undefined;
compressJpgImage(file, 1280, 1280, 0.8).then(blob => {
imageFile.value = KnownFileType.JPG.createFileFromBlob(blob, "image");
imageSrc.value = URL.createObjectURL(blob);
loading.value = false;
}).catch(error => {
imageFile.value = null;
imageSrc.value = undefined;
loading.value = false;
logger.error('failed to compress image', error);
snackbar.value?.showError('Unable to load image');
});