mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 14:23:51 +02:00
add cropper for vrc plus management
This commit is contained in:
pa
@@ -529,9 +529,19 @@
|
||||
<template v-if="avatarDialog.visible">
|
||||
<SetAvatarTagsDialog v-model:setAvatarTagsDialog="setAvatarTagsDialog" />
|
||||
<SetAvatarStylesDialog v-model:setAvatarStylesDialog="setAvatarStylesDialog" />
|
||||
<ChangeAvatarImageDialog
|
||||
v-model:changeAvatarImageDialogVisible="changeAvatarImageDialogVisible"
|
||||
v-model:previousImageUrl="previousImageUrl" />
|
||||
<input
|
||||
id="AvatarImageUploadButton"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
@change="onFileChangeAvatarImage" />
|
||||
<ImageCropDialog
|
||||
:open="cropDialogOpen"
|
||||
:title="t('dialog.change_content_image.avatar')"
|
||||
:aspect-ratio="4 / 3"
|
||||
:file="cropDialogFile"
|
||||
@update:open="cropDialogOpen = $event"
|
||||
@confirm="onCropConfirmAvatar" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@@ -597,14 +607,20 @@
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger
|
||||
} from '../../ui/dropdown-menu';
|
||||
import {
|
||||
handleImageUploadInput,
|
||||
readFileAsBase64,
|
||||
resizeImageToFitLimits,
|
||||
uploadImageLegacy,
|
||||
withUploadTimeout
|
||||
} from '../../../shared/utils/imageUpload';
|
||||
import { avatarModerationRequest, avatarRequest, favoriteRequest } from '../../../api';
|
||||
import { AppDebug } from '../../../service/appConfig.js';
|
||||
import { Badge } from '../../ui/badge';
|
||||
import { database } from '../../../service/database';
|
||||
import { formatJsonVars } from '../../../shared/utils/base/ui';
|
||||
import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
|
||||
|
||||
const ChangeAvatarImageDialog = defineAsyncComponent(() => import('./ChangeAvatarImageDialog.vue'));
|
||||
import ImageCropDialog from '../ImageCropDialog.vue';
|
||||
|
||||
const SetAvatarStylesDialog = defineAsyncComponent(() => import('./SetAvatarStylesDialog.vue'));
|
||||
const SetAvatarTagsDialog = defineAsyncComponent(() => import('./SetAvatarTagsDialog.vue'));
|
||||
|
||||
@@ -628,8 +644,9 @@
|
||||
{ value: 'JSON', label: t('dialog.avatar.json.header') }
|
||||
]);
|
||||
|
||||
const changeAvatarImageDialogVisible = ref(false);
|
||||
const previousImageUrl = ref('');
|
||||
const cropDialogOpen = ref(false);
|
||||
const cropDialogFile = ref(null);
|
||||
const changeAvatarImageLoading = ref(false);
|
||||
|
||||
const treeData = ref({});
|
||||
const memo = ref('');
|
||||
@@ -971,9 +988,63 @@
|
||||
}
|
||||
|
||||
function showChangeAvatarImageDialog() {
|
||||
const { imageUrl } = avatarDialog.value.ref;
|
||||
previousImageUrl.value = imageUrl;
|
||||
changeAvatarImageDialogVisible.value = true;
|
||||
document.getElementById('AvatarImageUploadButton').click();
|
||||
}
|
||||
|
||||
function onFileChangeAvatarImage(e) {
|
||||
const { file, clearInput } = handleImageUploadInput(e, {
|
||||
inputSelector: '#AvatarImageUploadButton',
|
||||
tooLargeMessage: () => t('message.file.too_large'),
|
||||
invalidTypeMessage: () => t('message.file.not_image')
|
||||
});
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
if (!avatarDialog.value.visible || avatarDialog.value.loading) {
|
||||
clearInput();
|
||||
return;
|
||||
}
|
||||
clearInput();
|
||||
cropDialogFile.value = file;
|
||||
cropDialogOpen.value = true;
|
||||
}
|
||||
|
||||
async function onCropConfirmAvatar(blob) {
|
||||
changeAvatarImageLoading.value = true;
|
||||
try {
|
||||
await withUploadTimeout(
|
||||
(async () => {
|
||||
const base64Body = await readFileAsBase64(blob);
|
||||
const base64File = await resizeImageToFitLimits(base64Body);
|
||||
if (LINUX) {
|
||||
const args = await avatarRequest.uploadAvatarImage(base64File);
|
||||
const fileUrl = args.json.versions[args.json.versions.length - 1].file.url;
|
||||
await avatarRequest.saveAvatar({
|
||||
id: avatarDialog.value.id,
|
||||
imageUrl: fileUrl
|
||||
});
|
||||
} else {
|
||||
await uploadImageLegacy('avatar', {
|
||||
entityId: avatarDialog.value.id,
|
||||
imageUrl: avatarDialog.value.ref.imageUrl,
|
||||
base64File,
|
||||
blob
|
||||
});
|
||||
}
|
||||
})()
|
||||
);
|
||||
toast.success(t('message.upload.success'));
|
||||
// force refresh cover image
|
||||
const avatarId = avatarDialog.value.id;
|
||||
avatarDialog.value.id = '';
|
||||
showAvatarDialog(avatarId);
|
||||
} catch (error) {
|
||||
console.error('avatar image upload process failed:', error);
|
||||
toast.error(t('message.upload.error'));
|
||||
} finally {
|
||||
changeAvatarImageLoading.value = false;
|
||||
cropDialogOpen.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function promptChangeAvatarDescription(avatar) {
|
||||
|
||||
@@ -1,428 +0,0 @@
|
||||
<template>
|
||||
<Dialog
|
||||
:open="changeAvatarImageDialogVisible"
|
||||
@update:open="
|
||||
(open) => {
|
||||
if (!open) closeDialog();
|
||||
}
|
||||
">
|
||||
<DialogContent class="x-dialog sm:max-w-212.5">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ t('dialog.change_content_image.avatar') }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div>
|
||||
<input
|
||||
id="AvatarImageUploadButton"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
@change="onFileChangeAvatarImage" />
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="changeAvatarImageDialogLoading"
|
||||
@click="uploadAvatarImage">
|
||||
<Upload />
|
||||
{{ t('dialog.change_content_image.upload') }}
|
||||
</Button>
|
||||
<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, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Info, Upload } from 'lucide-vue-next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Cropper } from 'vue-advanced-cropper';
|
||||
import { ref } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { avatarRequest, imageRequest } from '../../../api';
|
||||
import { $throw } from '../../../service/request';
|
||||
import { AppDebug } from '../../../service/appConfig';
|
||||
import { extractFileId } from '../../../shared/utils';
|
||||
import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
|
||||
import { useAvatarStore } from '../../../stores';
|
||||
|
||||
import 'vue-advanced-cropper/dist/style.css';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const { avatarDialog } = storeToRefs(useAvatarStore());
|
||||
const { applyAvatar } = useAvatarStore();
|
||||
|
||||
defineProps({
|
||||
changeAvatarImageDialogVisible: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
previousImageUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
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: '',
|
||||
base64SignatureFile: '',
|
||||
signatureMd5: '',
|
||||
fileId: '',
|
||||
avatarId: ''
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
async function resizeImageToFitLimits(file) {
|
||||
const response = await AppApi.ResizeImageToFitLimits(file);
|
||||
return response;
|
||||
}
|
||||
|
||||
function onFileChangeAvatarImage(e) {
|
||||
const { file, clearInput } = handleImageUploadInput(e, {
|
||||
inputSelector: '#AvatarImageUploadButton',
|
||||
tooLargeMessage: () => t('message.file.too_large'),
|
||||
invalidTypeMessage: () => t('message.file.not_image')
|
||||
});
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
if (!avatarDialog.value.visible || avatarDialog.value.loading) {
|
||||
clearInput();
|
||||
return;
|
||||
}
|
||||
|
||||
selectedFile.value = file;
|
||||
const r = new FileReader();
|
||||
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 = () => {
|
||||
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 {
|
||||
r.readAsArrayBuffer(blob);
|
||||
} catch (error) {
|
||||
console.error('Failed to read cropped image', error);
|
||||
finalize();
|
||||
}
|
||||
}, 'image/png');
|
||||
}
|
||||
|
||||
async function initiateUploadLegacy(base64File, file) {
|
||||
const fileMd5 = await AppApi.MD5File(base64File);
|
||||
const fileSizeInBytes = parseInt(file.size, 10);
|
||||
const base64SignatureFile = await AppApi.SignFile(base64File);
|
||||
const signatureMd5 = await AppApi.MD5File(base64SignatureFile);
|
||||
const signatureSizeInBytes = parseInt(await AppApi.FileLength(base64SignatureFile), 10);
|
||||
const avatarId = avatarDialog.value.id;
|
||||
const { imageUrl } = avatarDialog.value.ref;
|
||||
const fileId = extractFileId(imageUrl);
|
||||
avatarImage.value = {
|
||||
base64File,
|
||||
fileMd5,
|
||||
base64SignatureFile,
|
||||
signatureMd5,
|
||||
fileId,
|
||||
avatarId
|
||||
};
|
||||
const params = {
|
||||
fileMd5,
|
||||
fileSizeInBytes,
|
||||
signatureMd5,
|
||||
signatureSizeInBytes
|
||||
};
|
||||
const res = await imageRequest.uploadAvatarImage(params, fileId);
|
||||
return avatarImageInit(res);
|
||||
}
|
||||
|
||||
async function avatarImageInit(args) {
|
||||
const fileId = args.json.id;
|
||||
const fileVersion = args.json.versions[args.json.versions.length - 1].version;
|
||||
const params = {
|
||||
fileId,
|
||||
fileVersion
|
||||
};
|
||||
const res = await imageRequest.uploadAvatarImageFileStart(params);
|
||||
return avatarImageFileStart(res);
|
||||
}
|
||||
|
||||
async function avatarImageFileStart(args) {
|
||||
const { url } = args.json;
|
||||
const { fileId, fileVersion } = args.params;
|
||||
const params = {
|
||||
url,
|
||||
fileId,
|
||||
fileVersion
|
||||
};
|
||||
return uploadAvatarImageFileAWS(params);
|
||||
}
|
||||
|
||||
async function uploadAvatarImageFileAWS(params) {
|
||||
const json = await webApiService.execute({
|
||||
url: params.url,
|
||||
uploadFilePUT: true,
|
||||
fileData: avatarImage.value.base64File,
|
||||
fileMIME: 'image/png',
|
||||
fileMD5: avatarImage.value.fileMd5
|
||||
});
|
||||
|
||||
if (json.status !== 200) {
|
||||
changeAvatarImageDialogLoading.value = false;
|
||||
$throw(json.status, 'avatar image upload failed', params.url);
|
||||
}
|
||||
const args = {
|
||||
json,
|
||||
params
|
||||
};
|
||||
return avatarImageFileAWS(args);
|
||||
}
|
||||
|
||||
async function avatarImageFileAWS(args) {
|
||||
const { fileId, fileVersion } = args.params;
|
||||
const params = {
|
||||
fileId,
|
||||
fileVersion
|
||||
};
|
||||
const res = await imageRequest.uploadAvatarImageFileFinish(params);
|
||||
return avatarImageFileFinish(res);
|
||||
}
|
||||
|
||||
async function avatarImageFileFinish(args) {
|
||||
const { fileId, fileVersion } = args.params;
|
||||
const params = {
|
||||
fileId,
|
||||
fileVersion
|
||||
};
|
||||
const res = await imageRequest.uploadAvatarImageSigStart(params);
|
||||
return avatarImageSigStart(res);
|
||||
}
|
||||
|
||||
async function avatarImageSigStart(args) {
|
||||
const { url } = args.json;
|
||||
const { fileId, fileVersion } = args.params;
|
||||
const params = {
|
||||
url,
|
||||
fileId,
|
||||
fileVersion
|
||||
};
|
||||
return uploadAvatarImageSigAWS(params);
|
||||
}
|
||||
|
||||
async function uploadAvatarImageSigAWS(params) {
|
||||
const json = await webApiService.execute({
|
||||
url: params.url,
|
||||
uploadFilePUT: true,
|
||||
fileData: avatarImage.value.base64SignatureFile,
|
||||
fileMIME: 'application/x-rsync-signature',
|
||||
fileMD5: avatarImage.value.signatureMd5
|
||||
});
|
||||
|
||||
if (json.status !== 200) {
|
||||
changeAvatarImageDialogLoading.value = false;
|
||||
$throw(json.status, 'avatar image upload failed', params.url);
|
||||
}
|
||||
const args = {
|
||||
json,
|
||||
params
|
||||
};
|
||||
return avatarImageSigAWS(args);
|
||||
}
|
||||
|
||||
async function avatarImageSigAWS(args) {
|
||||
const { fileId, fileVersion } = args.params;
|
||||
const params = {
|
||||
fileId,
|
||||
fileVersion
|
||||
};
|
||||
const res = await imageRequest.uploadAvatarImageSigFinish(params);
|
||||
return avatarImageSigFinish(res);
|
||||
}
|
||||
async function avatarImageSigFinish(args) {
|
||||
const { fileId, fileVersion } = args.params;
|
||||
const params = {
|
||||
id: avatarImage.value.avatarId,
|
||||
imageUrl: `${AppDebug.endpointDomain}/file/${fileId}/${fileVersion}/file`
|
||||
};
|
||||
const res = await imageRequest.setAvatarImage(params);
|
||||
return avatarImageSet(res);
|
||||
}
|
||||
|
||||
function avatarImageSet(args) {
|
||||
changeAvatarImageDialogLoading.value = false;
|
||||
if (args.json.imageUrl === args.params.imageUrl) {
|
||||
emit('update:previousImageUrl', args.json.imageUrl);
|
||||
} else {
|
||||
$throw(0, 'avatar image change failed', args.params.imageUrl);
|
||||
}
|
||||
}
|
||||
|
||||
// ------------ Upload Process End ------------
|
||||
|
||||
async function initiateUpload(base64File) {
|
||||
const args = await avatarRequest.uploadAvatarImage(base64File);
|
||||
const fileUrl = args.json.versions[args.json.versions.length - 1].file.url;
|
||||
const avatarArgs = await avatarRequest.saveAvatar({
|
||||
id: avatarDialog.value.id,
|
||||
imageUrl: fileUrl
|
||||
});
|
||||
const ref = applyAvatar(avatarArgs.json);
|
||||
changeAvatarImageDialogLoading.value = false;
|
||||
emit('update:previousImageUrl', ref.imageUrl);
|
||||
|
||||
// closeDialog();
|
||||
}
|
||||
|
||||
function uploadAvatarImage() {
|
||||
document.getElementById('AvatarImageUploadButton').click();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.img-size {
|
||||
width: 500px;
|
||||
height: 375px;
|
||||
}
|
||||
</style>
|
||||
116
src/components/dialogs/ImageCropDialog.vue
Normal file
116
src/components/dialogs/ImageCropDialog.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<Dialog
|
||||
:open="open"
|
||||
@update:open="
|
||||
(v) => {
|
||||
if (!v) cancelCrop();
|
||||
}
|
||||
">
|
||||
<DialogContent class="x-dialog sm:max-w-212.5">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ title }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div v-if="cropperImageSrc" class="mt-4">
|
||||
<Cropper
|
||||
ref="cropperRef"
|
||||
class="h-100 max-h-full"
|
||||
:src="cropperImageSrc"
|
||||
:stencil-props="{ aspectRatio, movable: !loading, resizable: !loading }"
|
||||
:move-image="!loading"
|
||||
:resize-image="!loading"
|
||||
image-restriction="stencil" />
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<template v-if="cropperImageSrc">
|
||||
<Button variant="secondary" size="sm" :disabled="loading" @click="cancelCrop">
|
||||
{{ t('dialog.change_content_image.cancel') }}
|
||||
</Button>
|
||||
<Button size="sm" :disabled="loading" @click="onConfirmCrop">
|
||||
<Spinner v-if="loading" />
|
||||
{{ loading ? t('message.upload.loading') : t('dialog.gallery_icons.crop_image') }}
|
||||
</Button>
|
||||
</template>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Cropper } from 'vue-advanced-cropper';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useImageCropper } from '../../composables/useImageCropper';
|
||||
|
||||
import 'vue-advanced-cropper/dist/style.css';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const props = defineProps({
|
||||
open: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
aspectRatio: {
|
||||
type: Number,
|
||||
default: 4 / 3
|
||||
},
|
||||
file: {
|
||||
type: [File, null],
|
||||
default: null
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:open', 'confirm']);
|
||||
|
||||
const loading = ref(false);
|
||||
// Attention: cropperRef is used
|
||||
const { cropperRef, cropperImageSrc, resetCropState, loadImageForCrop, getCroppedBlob } = useImageCropper();
|
||||
|
||||
watch(
|
||||
() => props.file,
|
||||
(file) => {
|
||||
if (file) {
|
||||
loadImageForCrop(file);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
(open) => {
|
||||
if (!open) {
|
||||
loading.value = false;
|
||||
resetCropState();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function cancelCrop() {
|
||||
resetCropState();
|
||||
emit('update:open', false);
|
||||
}
|
||||
|
||||
async function onConfirmCrop() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const blob = await getCroppedBlob(props.file);
|
||||
if (!blob) {
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
emit('confirm', blob);
|
||||
} catch {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,415 +0,0 @@
|
||||
<template>
|
||||
<Dialog
|
||||
:open="changeWorldImageDialogVisible"
|
||||
@update:open="
|
||||
(open) => {
|
||||
if (!open) closeDialog();
|
||||
}
|
||||
">
|
||||
<DialogContent class="x-dialog sm:max-w-212.5">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ t('dialog.change_content_image.world') }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div>
|
||||
<input
|
||||
id="WorldImageUploadButton"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
@change="onFileChangeWorldImage" />
|
||||
<Button variant="outline" size="sm" :disabled="changeWorldImageDialogLoading" @click="uploadWorldImage">
|
||||
<Upload />
|
||||
{{ t('dialog.change_content_image.upload') }}
|
||||
</Button>
|
||||
<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, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Info, Upload } from 'lucide-vue-next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Cropper } from 'vue-advanced-cropper';
|
||||
import { ref } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { imageRequest, worldRequest } from '../../../api';
|
||||
import { $throw } from '../../../service/request';
|
||||
import { AppDebug } from '../../../service/appConfig';
|
||||
import { extractFileId } from '../../../shared/utils';
|
||||
import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
|
||||
import { useWorldStore } from '../../../stores';
|
||||
|
||||
import 'vue-advanced-cropper/dist/style.css';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const { worldDialog } = storeToRefs(useWorldStore());
|
||||
const { applyWorld } = useWorldStore();
|
||||
|
||||
defineProps({
|
||||
changeWorldImageDialogVisible: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
previousImageUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
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: '',
|
||||
base64SignatureFile: '',
|
||||
signatureMd5: '',
|
||||
fileId: '',
|
||||
worldId: ''
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
async function resizeImageToFitLimits(file) {
|
||||
const response = await AppApi.ResizeImageToFitLimits(file);
|
||||
return response;
|
||||
}
|
||||
|
||||
function onFileChangeWorldImage(e) {
|
||||
const { file, clearInput } = handleImageUploadInput(e, {
|
||||
inputSelector: '#WorldImageUploadButton',
|
||||
tooLargeMessage: () => t('message.file.too_large'),
|
||||
invalidTypeMessage: () => t('message.file.not_image')
|
||||
});
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
if (!worldDialog.value.visible || worldDialog.value.loading) {
|
||||
clearInput();
|
||||
return;
|
||||
}
|
||||
|
||||
selectedFile.value = file;
|
||||
const r = new FileReader();
|
||||
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 = () => {
|
||||
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 {
|
||||
r.readAsArrayBuffer(blob);
|
||||
} catch (error) {
|
||||
console.error('Failed to read cropped image', error);
|
||||
finalize();
|
||||
}
|
||||
}, 'image/png');
|
||||
}
|
||||
|
||||
async function initiateUploadLegacy(base64File, file) {
|
||||
const fileMd5 = await AppApi.MD5File(base64File);
|
||||
const fileSizeInBytes = parseInt(file.size, 10);
|
||||
const base64SignatureFile = await AppApi.SignFile(base64File);
|
||||
const signatureMd5 = await AppApi.MD5File(base64SignatureFile);
|
||||
const signatureSizeInBytes = parseInt(await AppApi.FileLength(base64SignatureFile), 10);
|
||||
const worldId = worldDialog.value.id;
|
||||
const { imageUrl } = worldDialog.value.ref;
|
||||
const fileId = extractFileId(imageUrl);
|
||||
worldImage.value = {
|
||||
base64File,
|
||||
fileMd5,
|
||||
base64SignatureFile,
|
||||
signatureMd5,
|
||||
fileId,
|
||||
worldId
|
||||
};
|
||||
const params = {
|
||||
fileMd5,
|
||||
fileSizeInBytes,
|
||||
signatureMd5,
|
||||
signatureSizeInBytes
|
||||
};
|
||||
const res = await imageRequest.uploadWorldImage(params, fileId);
|
||||
return worldImageInit(res);
|
||||
}
|
||||
|
||||
async function worldImageInit(args) {
|
||||
const fileId = args.json.id;
|
||||
const fileVersion = args.json.versions[args.json.versions.length - 1].version;
|
||||
const params = {
|
||||
fileId,
|
||||
fileVersion
|
||||
};
|
||||
const res = await imageRequest.uploadWorldImageFileStart(params);
|
||||
return worldImageFileStart(res);
|
||||
}
|
||||
|
||||
async function worldImageFileStart(args) {
|
||||
const { url } = args.json;
|
||||
const { fileId, fileVersion } = args.params;
|
||||
const params = {
|
||||
url,
|
||||
fileId,
|
||||
fileVersion
|
||||
};
|
||||
return uploadWorldImageFileAWS(params);
|
||||
}
|
||||
|
||||
async function uploadWorldImageFileAWS(params) {
|
||||
const json = await webApiService.execute({
|
||||
url: params.url,
|
||||
uploadFilePUT: true,
|
||||
fileData: worldImage.value.base64File,
|
||||
fileMIME: 'image/png',
|
||||
fileMD5: worldImage.value.fileMd5
|
||||
});
|
||||
|
||||
if (json.status !== 200) {
|
||||
changeWorldImageDialogLoading.value = false;
|
||||
$throw(json.status, 'World image upload failed', params.url);
|
||||
}
|
||||
const args = {
|
||||
json,
|
||||
params
|
||||
};
|
||||
return worldImageFileAWS(args);
|
||||
}
|
||||
|
||||
async function worldImageFileAWS(args) {
|
||||
const { fileId, fileVersion } = args.params;
|
||||
const params = {
|
||||
fileId,
|
||||
fileVersion
|
||||
};
|
||||
const res = await imageRequest.uploadWorldImageFileFinish(params);
|
||||
return worldImageFileFinish(res);
|
||||
}
|
||||
|
||||
async function worldImageFileFinish(args) {
|
||||
const { fileId, fileVersion } = args.params;
|
||||
const params = {
|
||||
fileId,
|
||||
fileVersion
|
||||
};
|
||||
const res = await imageRequest.uploadWorldImageSigStart(params);
|
||||
return worldImageSigStart(res);
|
||||
}
|
||||
|
||||
async function worldImageSigStart(args) {
|
||||
const { url } = args.json;
|
||||
const { fileId, fileVersion } = args.params;
|
||||
const params = {
|
||||
url,
|
||||
fileId,
|
||||
fileVersion
|
||||
};
|
||||
return uploadWorldImageSigAWS(params);
|
||||
}
|
||||
|
||||
async function uploadWorldImageSigAWS(params) {
|
||||
const json = await webApiService.execute({
|
||||
url: params.url,
|
||||
uploadFilePUT: true,
|
||||
fileData: worldImage.value.base64SignatureFile,
|
||||
fileMIME: 'application/x-rsync-signature',
|
||||
fileMD5: worldImage.value.signatureMd5
|
||||
});
|
||||
|
||||
if (json.status !== 200) {
|
||||
changeWorldImageDialogLoading.value = false;
|
||||
$throw(json.status, 'World image upload failed', params.url);
|
||||
}
|
||||
const args = {
|
||||
json,
|
||||
params
|
||||
};
|
||||
return worldImageSigAWS(args);
|
||||
}
|
||||
|
||||
async function worldImageSigAWS(args) {
|
||||
const { fileId, fileVersion } = args.params;
|
||||
const params = {
|
||||
fileId,
|
||||
fileVersion
|
||||
};
|
||||
const res = await imageRequest.uploadWorldImageSigFinish(params);
|
||||
return worldImageSigFinish(res);
|
||||
}
|
||||
async function worldImageSigFinish(args) {
|
||||
const { fileId, fileVersion } = args.params;
|
||||
const params = {
|
||||
id: worldImage.value.worldId,
|
||||
imageUrl: `${AppDebug.endpointDomain}/file/${fileId}/${fileVersion}/file`
|
||||
};
|
||||
const res = await imageRequest.setWorldImage(params);
|
||||
return worldImageSet(res);
|
||||
}
|
||||
|
||||
function worldImageSet(args) {
|
||||
changeWorldImageDialogLoading.value = false;
|
||||
if (args.json.imageUrl === args.params.imageUrl) {
|
||||
emit('update:previousImageUrl', args.json.imageUrl);
|
||||
} else {
|
||||
$throw(0, 'World image change failed', args.params.imageUrl);
|
||||
}
|
||||
}
|
||||
|
||||
// ------------ Upload Process End ------------
|
||||
|
||||
async function initiateUpload(base64File) {
|
||||
const args = await worldRequest.uploadWorldImage(base64File);
|
||||
const fileUrl = args.json.versions[args.json.versions.length - 1].file.url;
|
||||
const worldArgs = await worldRequest.saveWorld({
|
||||
id: worldDialog.value.id,
|
||||
imageUrl: fileUrl
|
||||
});
|
||||
const ref = applyWorld(worldArgs.json);
|
||||
changeWorldImageDialogLoading.value = false;
|
||||
emit('update:previousImageUrl', ref.imageUrl);
|
||||
|
||||
// closeDialog();
|
||||
}
|
||||
|
||||
function uploadWorldImage() {
|
||||
document.getElementById('WorldImageUploadButton').click();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.img-size {
|
||||
width: 500px;
|
||||
height: 375px;
|
||||
}
|
||||
</style>
|
||||
@@ -744,9 +744,19 @@
|
||||
<NewInstanceDialog
|
||||
:new-instance-dialog-location-tag="newInstanceDialogLocationTag"
|
||||
:last-location="lastLocation" />
|
||||
<ChangeWorldImageDialog
|
||||
v-model:change-world-image-dialog-visible="changeWorldImageDialogVisible"
|
||||
v-model:previousImageUrl="previousImageUrl" />
|
||||
<input
|
||||
id="WorldImageUploadButton"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
@change="onFileChangeWorldImage" />
|
||||
<ImageCropDialog
|
||||
:open="cropDialogOpen"
|
||||
:title="t('dialog.change_content_image.world')"
|
||||
:aspect-ratio="4 / 3"
|
||||
:file="cropDialogFile"
|
||||
@update:open="cropDialogOpen = $event"
|
||||
@confirm="onCropConfirmWorld" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -805,7 +815,6 @@
|
||||
userStatusClass
|
||||
} from '../../../shared/utils';
|
||||
import {
|
||||
useAdvancedSettingsStore,
|
||||
useAppearanceSettingsStore,
|
||||
useFavoriteStore,
|
||||
useGalleryStore,
|
||||
@@ -813,7 +822,6 @@
|
||||
useInstanceStore,
|
||||
useInviteStore,
|
||||
useLocationStore,
|
||||
useModalStore,
|
||||
useUserStore,
|
||||
useWorldStore
|
||||
} from '../../../stores';
|
||||
@@ -824,19 +832,21 @@
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger
|
||||
} from '../../ui/dropdown-menu';
|
||||
import {
|
||||
handleImageUploadInput,
|
||||
readFileAsBase64,
|
||||
resizeImageToFitLimits,
|
||||
uploadImageLegacy,
|
||||
withUploadTimeout
|
||||
} from '../../../shared/utils/imageUpload';
|
||||
import { favoriteRequest, miscRequest, userRequest, worldRequest } from '../../../api';
|
||||
import { Badge } from '../../ui/badge';
|
||||
import { database } from '../../../service/database.js';
|
||||
import { formatJsonVars } from '../../../shared/utils/base/ui';
|
||||
|
||||
import ImageCropDialog from '../ImageCropDialog.vue';
|
||||
import InstanceActionBar from '../../InstanceActionBar.vue';
|
||||
|
||||
const modalStore = useModalStore();
|
||||
const { translateText } = useAdvancedSettingsStore();
|
||||
const { bioLanguage, translationApi } = storeToRefs(useAdvancedSettingsStore());
|
||||
|
||||
const NewInstanceDialog = defineAsyncComponent(() => import('../NewInstanceDialog.vue'));
|
||||
const ChangeWorldImageDialog = defineAsyncComponent(() => import('./ChangeWorldImageDialog.vue'));
|
||||
const SetWorldTagsDialog = defineAsyncComponent(() => import('./SetWorldTagsDialog.vue'));
|
||||
const WorldAllowedDomainsDialog = defineAsyncComponent(() => import('./WorldAllowedDomainsDialog.vue'));
|
||||
|
||||
@@ -868,8 +878,9 @@
|
||||
});
|
||||
const isSetWorldTagsDialogVisible = ref(false);
|
||||
const newInstanceDialogLocationTag = ref('');
|
||||
const changeWorldImageDialogVisible = ref(false);
|
||||
const previousImageUrl = ref('');
|
||||
const cropDialogOpen = ref(false);
|
||||
const cropDialogFile = ref(null);
|
||||
const changeWorldImageLoading = ref(false);
|
||||
const translatedDescription = ref('');
|
||||
const isTranslating = ref(false);
|
||||
|
||||
@@ -1008,9 +1019,50 @@
|
||||
}
|
||||
|
||||
function showChangeWorldImageDialog() {
|
||||
const { imageUrl } = worldDialog.value.ref;
|
||||
previousImageUrl.value = imageUrl;
|
||||
changeWorldImageDialogVisible.value = true;
|
||||
document.getElementById('WorldImageUploadButton').click();
|
||||
}
|
||||
|
||||
function onFileChangeWorldImage(e) {
|
||||
const { file, clearInput } = handleImageUploadInput(e, {
|
||||
inputSelector: '#WorldImageUploadButton',
|
||||
tooLargeMessage: () => t('message.file.too_large'),
|
||||
invalidTypeMessage: () => t('message.file.not_image')
|
||||
});
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
if (!worldDialog.value.visible || worldDialog.value.loading) {
|
||||
clearInput();
|
||||
return;
|
||||
}
|
||||
clearInput();
|
||||
cropDialogFile.value = file;
|
||||
cropDialogOpen.value = true;
|
||||
}
|
||||
|
||||
async function onCropConfirmWorld(blob) {
|
||||
changeWorldImageLoading.value = true;
|
||||
try {
|
||||
await withUploadTimeout(
|
||||
(async () => {
|
||||
const base64Body = await readFileAsBase64(blob);
|
||||
const base64File = await resizeImageToFitLimits(base64Body);
|
||||
await uploadImageLegacy('world', {
|
||||
entityId: worldDialog.value.id,
|
||||
imageUrl: worldDialog.value.ref.imageUrl,
|
||||
base64File,
|
||||
blob
|
||||
});
|
||||
})()
|
||||
);
|
||||
toast.success(t('message.upload.success'));
|
||||
} catch (error) {
|
||||
console.error('World image upload process failed:', error);
|
||||
toast.error(t('message.upload.error'));
|
||||
} finally {
|
||||
changeWorldImageLoading.value = false;
|
||||
cropDialogOpen.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function showNewInstanceDialog(tag) {
|
||||
|
||||
Reference in New Issue
Block a user