liuxiang/faceFamilySource
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
yixu
2025-09-12 22:20:39 +08:00
parent e3783c5f0a
commit 7d65fd2a3a
17 changed files with 605 additions and 730 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
src/components/GenerateImg.vue
View File

@@ -3,7 +3,7 @@ import { ref, computed, watch, onMounted } from "vue"
import { useRouter, useRoute } from 'vue-router'
import positionMaps from '../static/positionMaps.js'
import imagePositionMaps from '../static/imagePositionMaps.js'
import { Storage } from "../libs/utils"
import { Request, Storage } from "../libs/utils"
import { globalStore } from "../globalstore.js";
import faceTemplate from "../static/ali_face_template.js";
import MyPhoto from './MyPhoto.vue'
@@ -61,13 +61,15 @@ const getTemplateIdsFromUrl = (response, url, index)=> {
const handleSuccess = (response, index) => {
// 上传成功后，将文件信息添加到数组
if (response) {
const ids = getTemplateIdsFromUrl(response, window.location.href, index);
const ids = getTemplateIdsFromUrl(response, globalStore.select_template, index);
uploadedFiles.push({
templateIds: ids
});
}
uploadItems.value[index].imageUrl = response.url;
ElMessage.success('上传成功！');
if (response && response.url) {
uploadItems.value[index].imageUrl = response.url;
ElMessage.success('上传成功！');
}
};
// 上传失败回调
@@ -76,36 +78,10 @@ const handleError = (error) => {
ElMessage.error('上传失败，请重试！');
};
// 根据imageUrl的结尾编号确定需要多少个上传项
const getUploadItemsCount = () => {
if (!imageUrl.value) return 2 // 默认值
const url = imageUrl.value.toString()
if (url.includes('xianxia') && url.endsWith('_3.png')) {
return 3
}
if (url.includes('paidui') && url.endsWith('_5.png')) {
return 3
}
if (url.endsWith('_1.png') || url.endsWith('_2.png') || url.endsWith('_3.png')) {
return 2
} else if (url.endsWith('_4.png')) {
return 3
} else if (url.endsWith('_5.png')) {
return 4
} else if (url.endsWith('_6.png')) {
return 5
}
return 2 // fallback
}
const uploadItems = ref([])
const initializeUploadItems = () => {
const count = getUploadItemsCount()
const count = globalStore.people_count;
const items = Array(count).fill(null).map(() => ({
imageUrl: '',
@@ -116,7 +92,7 @@ const initializeUploadItems = () => {
}
const route = useRoute()
const imageUrl = computed(() => route.query.imageUrl)
const imageUrl = ref(globalStore.select_template);
watch(imageUrl, () => {
initializeUploadItems()
@@ -124,89 +100,28 @@ watch(imageUrl, () => {
const uploadRefs = ref([]);
// 删除图片
const clearUploadFile = (index) => {
if (uploadRefs.value[index]) {
uploadRefs.value[index].clearFiles();
uploadItems.value[index].imageUrl = '';
uploadedFiles.value.splice(index, 1);
uploadedFiles.splice(index, 1);
}
};
// 存储上传成功的文件数据
const uploadedFiles = [];
const currentImageUrl = ref(null)
// const generateImage = (options) => {
// globalStore.generateStatus = true;
// const urlParams = new URLSearchParams(window.location.search);
// currentImageUrl.value = urlParams.get('imageUrl');
// globalStore.generateImgTemplates.push(currentImageUrl.value);
// disableClick.value = true;
// displayScanModel.value = true;
// const formData = {
// "template_id": "01a1d6a7-43e3-4a52-bfc3-ab4216cb56ee",
// "faces": [
// {
// "image_id": 65,
// "template_face_id": "01a1d6a7-43e3-4a52-bfc3-ab4216cb56ee_0"
// },
// {
// "image_id": 66,
// "template_face_id": "01a1d6a7-43e3-4a52-bfc3-ab4216cb56ee_1"
// }
// ],
// "is_public": false
// }
// const timeoutPromise = new Promise((resolve, reject) => {
// setTimeout(() => {
// resolve({ timedOut: true });
// }, 4000);
// });
// const apiPromise = fetch('https://huodong2.lzlj.com/api/faceFamily/face/merge', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// Accept: "application/json",
// 'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
// },
// body: JSON.stringify(formData)
// })
// .then(response => response.json())
// .then(data => {
// globalStore.mergeId = data.merge_id;
// fetch(`https://api.example.com/face/merge/${data.merge_id}/status`, {
// method: 'GET',
// headers: {
// 'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
// }
// })
// const res = response.json()
// console.log('get status Success:', res)
// console.log('merge Success:', data);
// return { success: true, data };
// })
// .catch((error) => {
// console.error('Error:', error);
// return { success: false, error };
// });
// Promise.race([apiPromise, timeoutPromise])
// .then(result => {
// if (result.success) {
// navigateToSynthesizedResults();
// }
// })
// .catch((error) => {
// console.error('Error:', error);
// });
// }
const faces = [];
const displayMyPhotoBtn = ref(false);
const displayScanImg = ref(false);
const disableScanAnimation = ref(false);
const generateImage = async (options) => {
console.log(uploadedFiles);
globalStore.generateStatus = true;
displayScanImg.value = true;
const urlParams = new URLSearchParams(window.location.search);
currentImageUrl.value = urlParams.get('imageUrl');
@@ -232,6 +147,7 @@ const generateImage = async (options) => {
}
try {
const loading = weui.loading();
const mergeResponse = await fetch('https://huodong2.lzlj.com/api/faceFamily/face/merge', {
method: 'POST',
headers: {
@@ -244,36 +160,46 @@ const generateImage = async (options) => {
const mergeData = await mergeResponse.json();
globalStore.mergeId = mergeData.merge_id;
let statusSuccess = false;
const startTime = Date.now();
const timeoutDuration = 2000;
while (Date.now() - startTime < timeoutDuration) {
fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${mergeData.merge_id}/status`, {
method: 'GET',
headers: {
'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
}
const navigateToSynthesizedResults = () => {
router.push({
name: 'synthesizedResults'
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
if (data.status = 'success') {
globalStore.result_url = data.result_url;
statusSuccess = true;
}
})
.catch((error) => {
console.error('Error:', error);
});
}
if (statusSuccess) {
navigateToSynthesizedResults();
} else {
navigateToSynthesizedResults(); //TODO 上线删除
console.log('Status check timed out or failed');
let index = 0
const max = 4;
const Timer = setInterval(()=>{
if (index >= max) {
loading.hide();
clearInterval(Timer)
} else {
index++
mergeFetch(index)
}
}, 1000)
const mergeFetch = async (index)=> {
const statusRes = await Request(`face/merge/${mergeData.merge_id}/status`, {}, 'GET', false)
if (statusRes.res.status === 200) {
if (statusRes.json.status === 'success') {
displayMyPhotoBtn.value = false;
loading.hide();
clearInterval(Timer)
navigateToSynthesizedResults();
globalStore.result_url = statusRes.json.result_url;
} else {
if (index === 4) {
disableScanAnimation.value = true;
displayMyPhotoBtn.value = true;
}
}
} else {
if (index === 4) {
disableScanAnimation.value = true;
displayMyPhotoBtn.value = true;
}
}
}
} catch (error) {
@@ -432,6 +358,7 @@ const isMyPhotoVisible = ref(false);
const isPhotoSquareVisible = ref(false);
const showMyPhoto = () => {
isMyPhotoVisible.value = true;
// displayMyPhotoBtn.value = false;
isPhotoSquareVisible.value = false;
};
@@ -440,11 +367,7 @@ const showPhotoSquare = () => {
isPhotoSquareVisible.value = true;
};
const navigateToSynthesizedResults = () => {
router.push({
name: 'synthesizedResults'
})
}
</script>
<template>
@@ -458,7 +381,8 @@ const navigateToSynthesizedResults = () => {
<img src="../assets/images/back-btn.png" @click="goBack" alt="后退">
</div>
<div v-if="!isMyPhotoVisible && !isPhotoSquareVisible" class="scene-item img-from-template scene-item-img">
<div v-if="!isMyPhotoVisible && !isPhotoSquareVisible" class="scene-item img-from-template scene-item-img"
:style="{ pointerEvents: displayMyPhotoBtn ? 'none' : 'auto' }" >
<img :src="imageUrl" alt="模板图片">
</div>
@@ -473,9 +397,10 @@ const navigateToSynthesizedResults = () => {
<div class="scene-item item-4" v-if="displayScanModel && !isMyPhotoVisible && !isPhotoSquareVisible">
<img src="../assets/images/scan.png" class="blocked-image" alt="扫描框">
</div>
<img v-if="displayScanModel && !isMyPhotoVisible && !isPhotoSquareVisible" src="../assets/images/scan-line.png" class="moving-image" alt="扫描line">
<img v-if="displayScanImg" src="../assets/images/scan-line.png" class="moving-image"
:style="{ animationPlayState: disableScanAnimation ? 'paused' : 'running' }" alt="扫描line">
<div v-if="displayScanModel && !isMyPhotoVisible && !isPhotoSquareVisible" class="scene-item item-5" @click="showMyPhoto" >
<div v-if="displayMyPhotoBtn" class="scene-item item-5" @click="showMyPhoto" >
<img src="../assets/images/my-photo-btn.png" class="blocked-image" alt="查看我的照片">
</div>
@@ -505,7 +430,7 @@ const navigateToSynthesizedResults = () => {
</el-upload>
<!-- 图片预览 -->
<div v-if="item.imageUrl" class="preview-container">
<div v-if="item.imageUrl" class="preview-container" :style="{ pointerEvents: displayMyPhotoBtn ? 'none' : 'auto' }">
<img
:src="item.imageUrl"
alt="预览图"
@@ -542,7 +467,7 @@ const navigateToSynthesizedResults = () => {
width: 100%;
position: absolute;
animation: moveUpDown 3s linear infinite;
z-index: 2;
z-index: 9;
}
@keyframes moveUpDown {