MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-18 14:23:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

add cropper for change avatar/world image dialog

Browse Source
This commit is contained in:
pa
2026-02-28 17:01:19 +09:00
parent 93c34209b4
commit cc696701b5
6 changed files with 327 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
package-lock.json generated
View File

@@ -8,7 +8,8 @@
"license": "MIT",
"dependencies": {
"hazardous": "^0.3.0",
"node-api-dotnet": "^0.9.19"
"node-api-dotnet": "^0.9.19",
"vue-advanced-cropper": "^2.8.9"
},
"devDependencies": {
"@dnd-kit/vue": "^0.3.2",
@@ -422,7 +423,6 @@
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.9.0"
@@ -432,7 +432,6 @@
"version": "7.28.5",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
"integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.9.0"
@@ -466,7 +465,6 @@
"version": "7.29.0",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
"integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/types": "^7.29.0"
@@ -578,7 +576,6 @@
"version": "7.29.0",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
"integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-string-parser": "^7.27.1",
@@ -2453,7 +2450,6 @@
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
"dev": true,
"license": "MIT"
},
"node_modules/@jridgewell/trace-mapping": {
@@ -4547,7 +4543,6 @@
"version": "3.5.29",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.29.tgz",
"integrity": "sha512-cuzPhD8fwRHk8IGfmYaR4eEe4cAyJEL66Ove/WZL7yWNL134nqLddSLwNRIsFlnnW1kK+p8Ck3viFnC0chXCXw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/parser": "^7.29.0",
@@ -4561,7 +4556,6 @@
"version": "3.5.29",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.29.tgz",
"integrity": "sha512-n0G5o7R3uBVmVxjTIYcz7ovr8sy7QObFG8OQJ3xGCDNhbG60biP/P5KnyY8NLd81OuT1WJflG7N4KWYHaeeaIg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vue/compiler-core": "3.5.29",
@@ -4572,7 +4566,6 @@
"version": "3.5.29",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.29.tgz",
"integrity": "sha512-oJZhN5XJs35Gzr50E82jg2cYdZQ78wEwvRO6Y63TvLVTc+6xICzJHP1UIecdSPPYIbkautNBanDiWYa64QSFIA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/parser": "^7.29.0",
@@ -4590,7 +4583,6 @@
"version": "0.30.21",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.5"
@@ -4600,7 +4592,6 @@
"version": "3.5.29",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.29.tgz",
"integrity": "sha512-Y/ARJZE6fpjzL5GH/phJmsFwx3g6t2KmHKHx5q+MLl2kencADKIrhH5MLF6HHpRMmlRAYBRSvv347Mepf1zVNw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vue/compiler-dom": "3.5.29",
@@ -4647,7 +4638,6 @@
"version": "3.5.29",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.29.tgz",
"integrity": "sha512-zcrANcrRdcLtmGZETBxWqIkoQei8HaFpZWx/GHKxx79JZsiZ8j1du0VUJtu4eJjgFvU/iKL5lRXFXksVmI+5DA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vue/shared": "3.5.29"
@@ -4657,7 +4647,6 @@
"version": "3.5.29",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.29.tgz",
"integrity": "sha512-8DpW2QfdwIWOLqtsNcds4s+QgwSaHSJY/SUe04LptianUQ/0xi6KVsu/pYVh+HO3NTVvVJjIPL2t6GdeKbS4Lg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vue/reactivity": "3.5.29",
@@ -4668,7 +4657,6 @@
"version": "3.5.29",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.29.tgz",
"integrity": "sha512-AHvvJEtcY9tw/uk+s/YRLSlxxQnqnAkjqvK25ZiM4CllCZWzElRAoQnCM42m9AHRLNJ6oe2kC5DCgD4AUdlvXg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vue/reactivity": "3.5.29",
@@ -4681,7 +4669,6 @@
"version": "3.5.29",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.29.tgz",
"integrity": "sha512-G/1k6WK5MusLlbxSE2YTcqAAezS+VuwHhOvLx2KnQU7G2zCH6KIb+5Wyt6UjMq7a3qPzNEjJXs1hvAxDclQH+g==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vue/compiler-ssr": "3.5.29",
@@ -4695,7 +4682,6 @@
"version": "3.5.29",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.29.tgz",
"integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==",
"dev": true,
"license": "MIT"
},
"node_modules/@vue/test-utils": {
@@ -5723,6 +5709,12 @@
"url": "https://polar.sh/cva"
}
},
"node_modules/classnames": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
"license": "MIT"
},
"node_modules/cli-cursor": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
@@ -6099,7 +6091,6 @@
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
"dev": true,
"license": "MIT"
},
"node_modules/data-urls": {
@@ -6161,6 +6152,12 @@
"dev": true,
"license": "MIT"
},
"node_modules/debounce": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
"integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
"license": "MIT"
},
"node_modules/debug": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -6485,6 +6482,12 @@
"dev": true,
"license": "MIT"
},
"node_modules/easy-bem": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
"integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==",
"license": "MIT"
},
"node_modules/echarts": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
@@ -6938,7 +6941,6 @@
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
"integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
"dev": true,
"license": "BSD-2-Clause",
"engines": {
"node": ">=0.12"
@@ -7353,7 +7355,6 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
"dev": true,
"license": "MIT"
},
"node_modules/esutils": {
@@ -9528,7 +9529,6 @@
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
"dev": true,
"funding": [
{
"type": "github",
@@ -10067,7 +10067,6 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
"dev": true,
"license": "ISC"
},
"node_modules/picomatch": {
@@ -10124,7 +10123,6 @@
"version": "8.5.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
"dev": true,
"funding": [
{
"type": "opencollective",
@@ -11316,7 +11314,6 @@
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
"dev": true,
"license": "BSD-3-Clause",
"engines": {
"node": ">=0.10.0"
@@ -11985,7 +11982,7 @@
"version": "5.9.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"dev": true,
"devOptional": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
@@ -12447,7 +12444,6 @@
"version": "3.5.29",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.29.tgz",
"integrity": "sha512-BZqN4Ze6mDQVNAni0IHeMJ5mwr8VAJ3MQC9FmprRhcBYENw+wOAAjRj8jfmN6FLl0j96OXbR+CjWhmAmM+QGnA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vue/compiler-dom": "3.5.29",
@@ -12465,6 +12461,24 @@
}
}
},
"node_modules/vue-advanced-cropper": {
"version": "2.8.9",
"resolved": "https://registry.npmjs.org/vue-advanced-cropper/-/vue-advanced-cropper-2.8.9.tgz",
"integrity": "sha512-1jc5gO674kVGpJKekoaol6ZlwaF5VYDLSBwBOUpViW0IOrrRsyLw6XNszjEqgbavvqinlKNS6Kqlom3B5M72Tw==",
"license": "MIT",
"dependencies": {
"classnames": "^2.2.6",
"debounce": "^1.2.0",
"easy-bem": "^1.0.2"
},
"engines": {
"node": ">=8",
"npm": ">=5"
},
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue-component-type-helpers": {
"version": "1.6.5",
"resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.6.5.tgz",

3
package.json
View File

@@ -187,7 +187,8 @@
},
"dependencies": {
"hazardous": "^0.3.0",
"node-api-dotnet": "^0.9.19"
"node-api-dotnet": "^0.9.19",
"vue-advanced-cropper": "^2.8.9"
},
"engines": {
"node": ">=24.10.0",

185
src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
View File

@@ -18,8 +18,6 @@
accept="image/*"
style="display: none"
@change="onFileChangeAvatarImage" />
<span>{{ t('dialog.change_content_image.description') }}</span>
<br />
<Button
variant="outline"
size="sm"
@@ -28,19 +26,46 @@
<Upload />
{{ t('dialog.change_content_image.upload') }}
</Button>
<br />
<div class="inline-block p-1 pb-0 hover:rounded-sm">
<div class="text-xs text-muted-foreground mb-4 mt-1 flex items-center gap-1">
<Info /> {{ t('dialog.change_content_image.description') }}
</div>
<div v-if="cropperImageSrc" class="mt-4">
<Cropper
ref="cropperRef"
class="h-100 max-h-full"
:src="cropperImageSrc"
:stencil-props="{ aspectRatio: 4 / 3 }"
image-restriction="stencil" />
</div>
<div v-else class="flex justify-center items-center">
<img :src="previousImageUrl" class="img-size" loading="lazy" />
</div>
</div>
<DialogFooter>
<template v-if="cropperImageSrc">
<Button
variant="secondary"
size="sm"
:disabled="changeAvatarImageDialogLoading"
@click="cancelCrop">
{{ t('dialog.change_content_image.cancel') }}
</Button>
<Button size="sm" :disabled="changeAvatarImageDialogLoading" @click="onConfirmCrop">
{{ t('dialog.change_content_image.confirm') }}
</Button>
</template>
</DialogFooter>
</DialogContent>
</Dialog>
</template>
<script setup>
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Info, Upload } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { Upload } from 'lucide-vue-next';
import { Cropper } from 'vue-advanced-cropper';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
@@ -53,6 +78,8 @@
import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
import { useAvatarStore } from '../../../stores';
import 'vue-advanced-cropper/dist/style.css';
const { t } = useI18n();
const { avatarDialog } = storeToRefs(useAvatarStore());
@@ -69,7 +96,14 @@
}
});
const MAX_PREVIEW_SIZE = 800;
const changeAvatarImageDialogLoading = ref(false);
const cropperRef = ref(null);
const cropperImageSrc = ref('');
const selectedFile = ref(null);
const originalImage = ref(null);
const previewScale = ref(1);
const avatarImage = ref({
base64File: '',
fileMd5: '',
@@ -81,7 +115,15 @@
const emit = defineEmits(['update:changeAvatarImageDialogVisible', 'update:previousImageUrl']);
function resetCropState() {
cropperImageSrc.value = '';
selectedFile.value = null;
originalImage.value = null;
previewScale.value = 1;
}
function closeDialog() {
resetCropState();
emit('update:changeAvatarImageDialogVisible', false);
}
@@ -104,46 +146,109 @@
return;
}
selectedFile.value = file;
const r = new FileReader();
const finalize = () => {
changeAvatarImageDialogLoading.value = false;
clearInput();
};
r.onerror = finalize;
r.onabort = finalize;
r.onload = async function () {
const uploadPromise = (async () => {
const base64File = await resizeImageToFitLimits(btoa(r.result.toString()));
// 10MB
if (LINUX) {
// use new website upload process on Linux, we're missing the needed libraries for Unity method
// website method clears avatar name and is missing world image uploading
await initiateUpload(base64File);
return;
r.onload = () => {
const img = new Image();
img.onload = () => {
originalImage.value = img;
if (img.width > MAX_PREVIEW_SIZE || img.height > MAX_PREVIEW_SIZE) {
const scale = Math.min(MAX_PREVIEW_SIZE / img.width, MAX_PREVIEW_SIZE / img.height);
previewScale.value = scale;
const cvs = document.createElement('canvas');
cvs.width = Math.round(img.width * scale);
cvs.height = Math.round(img.height * scale);
const ctx = cvs.getContext('2d');
ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
cropperImageSrc.value = cvs.toDataURL('image/jpeg', 0.9);
} else {
previewScale.value = 1;
cropperImageSrc.value = r.result;
}
await initiateUploadLegacy(base64File, file);
})();
toast.promise(uploadPromise, {
loading: t('message.upload.loading'),
success: t('message.upload.success'),
error: t('message.upload.error')
});
};
img.onerror = () => {
resetCropState();
};
img.src = r.result;
};
r.onerror = () => {
resetCropState();
toast.error(t('message.file.not_image'));
};
r.readAsDataURL(file);
clearInput();
}
function cancelCrop() {
resetCropState();
}
function onConfirmCrop() {
const { coordinates } = cropperRef.value.getResult();
if (!coordinates || !originalImage.value) {
return;
}
// Scale coordinates back
const scale = previewScale.value;
const srcX = Math.round(coordinates.left / scale);
const srcY = Math.round(coordinates.top / scale);
const srcW = Math.round(coordinates.width / scale);
const srcH = Math.round(coordinates.height / scale);
const cropCanvas = document.createElement('canvas');
cropCanvas.width = srcW;
cropCanvas.height = srcH;
const ctx = cropCanvas.getContext('2d');
ctx.drawImage(originalImage.value, srcX, srcY, srcW, srcH, 0, 0, srcW, srcH);
cropCanvas.toBlob((blob) => {
const r = new FileReader();
const finalize = () => {
changeAvatarImageDialogLoading.value = false;
resetCropState();
};
r.onerror = finalize;
r.onabort = finalize;
r.onload = async function () {
const uploadPromise = (async () => {
const bytes = new Uint8Array(r.result);
let binary = '';
for (let i = 0; i < bytes.length; i++) {
binary += String.fromCharCode(bytes[i]);
}
const base64File = await resizeImageToFitLimits(btoa(binary));
// 10MB
if (LINUX) {
// use new website upload process on Linux, we're missing the needed libraries for Unity method
// website method clears avatar name and is missing world image uploading
await initiateUpload(base64File);
return;
}
await initiateUploadLegacy(base64File, blob);
})();
toast.promise(uploadPromise, {
loading: t('message.upload.loading'),
success: t('message.upload.success'),
error: t('message.upload.error')
});
try {
await uploadPromise;
} catch (error) {
console.error('avatar image upload process failed:', error);
} finally {
finalize();
}
};
changeAvatarImageDialogLoading.value = true;
try {
await uploadPromise;
r.readAsArrayBuffer(blob);
} catch (error) {
console.error('avatar image upload process failed:', error);
} finally {
console.error('Failed to read cropped image', error);
finalize();
}
};
changeAvatarImageDialogLoading.value = true;
try {
r.readAsBinaryString(file);
} catch (error) {
console.error('Failed to read file', error);
finalize();
}
}, 'image/png');
}
async function initiateUploadLegacy(base64File, file) {

171
src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
View File

@@ -18,25 +18,46 @@
accept="image/*"
style="display: none"
@change="onFileChangeWorldImage" />
<span>{{ t('dialog.change_content_image.description') }}</span>
<br />
<Button variant="outline" size="sm" :disabled="changeWorldImageDialogLoading" @click="uploadWorldImage">
<Upload />
{{ t('dialog.change_content_image.upload') }}
</Button>
<br />
<div class="inline-block p-1 pb-0 hover:rounded-sm">
<div class="text-xs text-muted-foreground mb-4 mt-1 flex items-center gap-1">
<Info /> {{ t('dialog.change_content_image.description') }}
</div>
<div v-if="cropperImageSrc" class="mt-4">
<Cropper
ref="cropperRef"
class="h-100 max-h-full"
:src="cropperImageSrc"
:stencil-props="{ aspectRatio: 4 / 3 }"
image-restriction="stencil" />
</div>
<div v-else class="flex justify-center items-center">
<img :src="previousImageUrl" class="img-size" loading="lazy" />
</div>
</div>
<DialogFooter>
<template v-if="cropperImageSrc">
<Button variant="secondary" size="sm" :disabled="changeWorldImageDialogLoading" @click="cancelCrop">
{{ t('dialog.change_content_image.cancel') }}
</Button>
<Button size="sm" :disabled="changeWorldImageDialogLoading" @click="onConfirmCrop">
{{ t('dialog.change_content_image.confirm') }}
</Button>
</template>
</DialogFooter>
</DialogContent>
</Dialog>
</template>
<script setup>
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Info, Upload } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { Upload } from 'lucide-vue-next';
import { Cropper } from 'vue-advanced-cropper';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
@@ -49,6 +70,8 @@
import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
import { useWorldStore } from '../../../stores';
import 'vue-advanced-cropper/dist/style.css';
const { t } = useI18n();
const { worldDialog } = storeToRefs(useWorldStore());
@@ -65,7 +88,14 @@
}
});
const MAX_PREVIEW_SIZE = 800;
const changeWorldImageDialogLoading = ref(false);
const cropperRef = ref(null);
const cropperImageSrc = ref('');
const selectedFile = ref(null);
const originalImage = ref(null);
const previewScale = ref(1);
const worldImage = ref({
base64File: '',
fileMd5: '',
@@ -77,7 +107,15 @@
const emit = defineEmits(['update:changeWorldImageDialogVisible', 'update:previousImageUrl']);
function resetCropState() {
cropperImageSrc.value = '';
selectedFile.value = null;
originalImage.value = null;
previewScale.value = 1;
}
function closeDialog() {
resetCropState();
emit('update:changeWorldImageDialogVisible', false);
}
@@ -100,41 +138,104 @@
return;
}
selectedFile.value = file;
const r = new FileReader();
const finalize = () => {
changeWorldImageDialogLoading.value = false;
clearInput();
r.onload = () => {
const img = new Image();
img.onload = () => {
originalImage.value = img;
if (img.width > MAX_PREVIEW_SIZE || img.height > MAX_PREVIEW_SIZE) {
const scale = Math.min(MAX_PREVIEW_SIZE / img.width, MAX_PREVIEW_SIZE / img.height);
previewScale.value = scale;
const cvs = document.createElement('canvas');
cvs.width = Math.round(img.width * scale);
cvs.height = Math.round(img.height * scale);
const ctx = cvs.getContext('2d');
ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
cropperImageSrc.value = cvs.toDataURL('image/jpeg', 0.9);
} else {
previewScale.value = 1;
cropperImageSrc.value = r.result;
}
};
img.onerror = () => {
resetCropState();
};
img.src = r.result;
};
r.onerror = finalize;
r.onabort = finalize;
r.onload = async function () {
const uploadPromise = (async () => {
const base64File = await resizeImageToFitLimits(btoa(r.result.toString()));
// 10MB
await initiateUploadLegacy(base64File, file);
// await initiateUpload(base64File);
})();
toast.promise(uploadPromise, {
loading: t('message.upload.loading'),
success: t('message.upload.success'),
error: t('message.upload.error')
});
r.onerror = () => {
resetCropState();
toast.error(t('message.file.not_image'));
};
r.readAsDataURL(file);
clearInput();
}
function cancelCrop() {
resetCropState();
}
function onConfirmCrop() {
const { coordinates } = cropperRef.value.getResult();
if (!coordinates || !originalImage.value) {
return;
}
// scale back
const scale = previewScale.value;
const srcX = Math.round(coordinates.left / scale);
const srcY = Math.round(coordinates.top / scale);
const srcW = Math.round(coordinates.width / scale);
const srcH = Math.round(coordinates.height / scale);
const cropCanvas = document.createElement('canvas');
cropCanvas.width = srcW;
cropCanvas.height = srcH;
const ctx = cropCanvas.getContext('2d');
ctx.drawImage(originalImage.value, srcX, srcY, srcW, srcH, 0, 0, srcW, srcH);
cropCanvas.toBlob((blob) => {
const r = new FileReader();
const finalize = () => {
changeWorldImageDialogLoading.value = false;
resetCropState();
};
r.onerror = finalize;
r.onabort = finalize;
r.onload = async function () {
const uploadPromise = (async () => {
const bytes = new Uint8Array(r.result);
let binary = '';
for (let i = 0; i < bytes.length; i++) {
binary += String.fromCharCode(bytes[i]);
}
const base64File = await resizeImageToFitLimits(btoa(binary));
// 10MB
await initiateUploadLegacy(base64File, blob);
// await initiateUpload(base64File);
})();
toast.promise(uploadPromise, {
loading: t('message.upload.loading'),
success: t('message.upload.success'),
error: t('message.upload.error')
});
try {
await uploadPromise;
} catch (error) {
console.error('World image upload process failed:', error);
} finally {
finalize();
}
};
changeWorldImageDialogLoading.value = true;
try {
await uploadPromise;
r.readAsArrayBuffer(blob);
} catch (error) {
console.error('World image upload process failed:', error);
} finally {
console.error('Failed to read cropped image', error);
finalize();
}
};
changeWorldImageDialogLoading.value = true;
try {
r.readAsBinaryString(file);
} catch (error) {
console.error('Failed to read file', error);
finalize();
}
}, 'image/png');
}
async function initiateUploadLegacy(base64File, file) {

4
src/localization/en.json
View File

@@ -1707,7 +1707,9 @@
"avatar": "Change Avatar Image",
"world": "Change World Image",
"description": "Recommended image size: 1200x900px (4:3)",
"upload": "Upload Image"
"upload": "Upload Image",
"confirm": "Confirm Crop",
"cancel": "Cancel"
},
"screenshot_metadata": {
"header": "Screenshot Metadata",

3
src/shared/utils/imageUpload.js
View File

@@ -22,7 +22,8 @@ function getInputElement(selector) {
export function handleImageUploadInput(event, options = {}) {
const {
inputSelector,
maxSize = 100000000,
// 20MB
maxSize = 20000000,
acceptPattern = /image.*/,
tooLargeMessage,
invalidTypeMessage,