mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-19 06:43:51 +02:00
add cropper for change avatar/world image dialog
This commit is contained in:
pa
@@ -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) {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user