xsl/hair_change_color
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save code

Browse Source
This commit is contained in:
xsl
2026-01-18 22:39:06 +08:00
parent 11dd30eddf
commit c93d8b7236
6 changed files with 359 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/style.css
+7 -5
View File
@@ -118,7 +118,8 @@ body {
.image-preview img {
width: 100%;
height: 100%;
object-fit: cover;
object-fit: contain;
background-color: white;
}
/* 下一步按钮 */
@@ -255,8 +256,8 @@ body {
.result-preview {
width: 100%;
max-width: 500px;
height: 500px;
max-width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid #eee;
border-radius: 8px;
@@ -270,7 +271,8 @@ body {
.result-preview img {
width: 100%;
height: 100%;
object-fit: cover;
object-fit: contain;
background-color: white;
}
/* 操作按钮 */
@@ -372,7 +374,7 @@ body {
}
.result-preview {
height: 400px;
height: 250px;
}
}
frontend/index.html
+49 -4
View File
@@ -30,10 +30,13 @@
</div>
</div>
<!-- 下一步按钮 -->
<div class="next-section">
<!-- 功能选择按钮 -->
<div class="next-section" style="display: flex; flex-direction: column; gap: 1rem; align-items: center;">
<button id="nextBtn" class="next-btn">
<span>下一步选择发型</span>
<span>更换发型</span>
</button>
<button id="changeColorBtn" class="next-btn" style="background-color: #50E3C2;">
<span>更换头发颜色</span>
</button>
</div>
</section>
@@ -56,11 +59,49 @@
</div>
</section>
<!-- 头发颜色选择页 -->
<section id="hairColorPage" class="page">
<!-- 颜色选择区 -->
<div class="hairstyle-list">
<h2>选择头发颜色</h2>
<div style="max-width: 400px; margin: 0 auto; padding: 2rem; background-color: #fafafa; border-radius: 8px;">
<!-- 颜色选择器 -->
<div style="margin-bottom: 2rem;">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">选择颜色</label>
<input type="color" id="colorPicker" style="width: 100%; height: 60px; border: none; border-radius: 4px;">
</div>
<!-- 颜色预览 -->
<div style="margin-bottom: 2rem;">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">颜色预览</label>
<div id="colorPreview" style="width: 100%; height: 100px; background-color: #ff0000; border-radius: 4px; border: 2px solid #eee;"></div>
</div>
<!-- RGB值显示 -->
<div style="margin-bottom: 2rem;">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">RGB值</label>
<div id="rgbValue" style="padding: 0.5rem; background-color: #f0f0f0; border-radius: 4px; font-family: monospace;">[255, 0, 0]</div>
</div>
<!-- 颜色强度调整 -->
<div style="margin-bottom: 2rem;">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">颜色强度: <span id="ratioValue">0.9</span></label>
<input type="range" id="ratioSlider" min="0" max="1" step="0.1" value="0.9" style="width: 100%;">
</div>
</div>
</div>
<!-- 确认按钮 -->
<div class="confirm-section">
<button id="confirmColorBtn" class="confirm-btn" style="background-color: #50E3C2;">确认更换颜色</button>
</div>
</section>
<!-- 结果预览页 -->
<section id="resultPage" class="page">
<!-- 效果展示 -->
<div class="result-section">
<h2>发型更换效果</h2>
<h2 id="resultTitle">发型更换效果</h2>
<div id="resultPreview" class="result-preview">
<!-- 结果图片将通过JavaScript动态添加 -->
</div>
@@ -72,6 +113,10 @@
<span class="action-icon">✂️</span>
<span>重新选择发型</span>
</button>
<button id="reselectColorBtn" class="action-btn" style="display: none;">
<span class="action-icon">🎨</span>
<span>重新选择颜色</span>
</button>
<button id="reuploadImageBtn" class="action-btn">
<span class="action-icon">📷</span>
<span>重新上传照片</span>
frontend/js/main.js
+153 -4
View File
@@ -27,10 +27,32 @@ async function changeHair(imageFile, hairstyleId) {
}
}
async function changeHairColor(imageFile, rgb, ratio) {
try {
const formData = new FormData();
formData.append('image', imageFile);
formData.append('rgb', rgb);
formData.append('ratio', ratio);
const response = await axios.post('/api/change-hair-color', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
return response.data;
} catch (error) {
console.error('更换头发颜色失败:', error);
throw error;
}
}
// 全局变量
let uploadedImage = null;
let selectedHairstyle = null;
let hairstylesData = [];
let selectedColor = null;
let selectedRatio = 0.9;
let currentFunction = null; // 记录当前执行的功能：'hairstyle' 或 'color'
// DOM元素
const elements = {
@@ -39,16 +61,28 @@ const elements = {
imagePreview: document.getElementById('imagePreview'),
imageUpload: document.getElementById('imageUpload'),
nextBtn: document.getElementById('nextBtn'),
changeColorBtn: document.getElementById('changeColorBtn'),
// 发型选择页元素
hairstylePage: document.getElementById('hairstylePage'),
hairstyleGrid: document.getElementById('hairstyleGrid'),
confirmBtn: document.getElementById('confirmBtn'),
// 头发颜色选择页元素
hairColorPage: document.getElementById('hairColorPage'),
colorPicker: document.getElementById('colorPicker'),
colorPreview: document.getElementById('colorPreview'),
rgbValue: document.getElementById('rgbValue'),
ratioSlider: document.getElementById('ratioSlider'),
ratioValue: document.getElementById('ratioValue'),
confirmColorBtn: document.getElementById('confirmColorBtn'),
// 结果预览页元素
resultPage: document.getElementById('resultPage'),
resultTitle: document.getElementById('resultTitle'),
resultPreview: document.getElementById('resultPreview'),
reselectHairstyleBtn: document.getElementById('reselectHairstyleBtn'),
reselectColorBtn: document.getElementById('reselectColorBtn'),
reuploadImageBtn: document.getElementById('reuploadImageBtn'),
saveResultBtn: document.getElementById('saveResultBtn'),
@@ -71,17 +105,24 @@ function bindEventListeners() {
// 图片上传
elements.imageUpload.addEventListener('change', handleImageUpload);
// 下一步按钮
// 功能选择按钮
elements.nextBtn.addEventListener('click', navigateToHairstylePage);
elements.changeColorBtn.addEventListener('click', navigateToHairColorPage);
// 确认按钮
// 发型确认按钮
elements.confirmBtn.addEventListener('click', handleConfirmHairstyle);
// 头发颜色相关事件
elements.colorPicker.addEventListener('input', handleColorChange);
elements.ratioSlider.addEventListener('input', handleRatioChange);
elements.confirmColorBtn.addEventListener('click', handleConfirmColor);
// 返回按钮
elements.backBtn.addEventListener('click', handleBack);
// 结果页操作按钮
elements.reselectHairstyleBtn.addEventListener('click', handleReselectHairstyle);
elements.reselectColorBtn.addEventListener('click', handleReselectColor);
elements.reuploadImageBtn.addEventListener('click', handleReuploadImage);
elements.saveResultBtn.addEventListener('click', handleSaveResult);
}
@@ -127,11 +168,26 @@ function navigateToHairstylePage() {
return;
}
currentFunction = 'hairstyle';
renderHairstyles();
showPage(elements.hairstylePage);
showBackBtn();
}
// 导航到头发颜色选择页
function navigateToHairColorPage() {
if (!uploadedImage) {
alert('请先上传图片');
return;
}
currentFunction = 'color';
// 初始化颜色选择器
handleColorChange({ target: elements.colorPicker });
showPage(elements.hairColorPage);
showBackBtn();
}
// 渲染发型列表
function renderHairstyles() {
elements.hairstyleGrid.innerHTML = '';
@@ -169,6 +225,82 @@ function selectHairstyle(hairstyleId) {
}
}
// 处理颜色变化
function handleColorChange(e) {
const color = e.target.value;
selectedColor = color;
// 更新颜色预览
elements.colorPreview.style.backgroundColor = color;
// 转换为RGB值
const rgb = hexToRgb(color);
elements.rgbValue.textContent = `[${rgb.r}, ${rgb.g}, ${rgb.b}]`;
}
// 处理比例变化
function handleRatioChange(e) {
const ratio = e.target.value;
selectedRatio = parseFloat(ratio);
elements.ratioValue.textContent = ratio;
}
// 处理确认颜色选择
async function handleConfirmColor() {
if (!uploadedImage || !selectedColor) {
alert('请上传图片并选择颜色');
return;
}
try {
// 显示加载状态
elements.loading.innerHTML = `
<div class="loading-spinner"></div>
<p>正在处理头发颜色更换，请稍候...</p>
<p style="font-size: 0.9rem; color: #666;">此过程可能需要10-60秒</p>
`;
showLoading();
// 转换为RGB值
const rgb = hexToRgb(selectedColor);
const rgbString = `[${rgb.r}, ${rgb.g}, ${rgb.b}]`;
// 发起头发颜色更换请求
const response = await changeHairColor(uploadedImage, rgbString, selectedRatio);
if (response.success) {
// 显示结果
elements.resultTitle.textContent = '头发颜色更换效果';
showResult(response.data.result_image);
// 显示/隐藏相应的按钮
elements.reselectHairstyleBtn.style.display = 'none';
elements.reselectColorBtn.style.display = 'block';
} else {
alert(response.message || '处理失败，请重试');
}
} catch (error) {
console.error('处理失败:', error);
alert('处理失败，请重试');
} finally {
hideLoading();
}
}
// 十六进制颜色转换为RGB
function hexToRgb(hex) {
// 移除#号
hex = hex.replace(/^#/, '');
// 解析RGB值
const bigint = parseInt(hex, 16);
const r = (bigint >> 16) & 255;
const g = (bigint >> 8) & 255;
const b = bigint & 255;
return { r, g, b };
}
// 处理确认发型选择
async function handleConfirmHairstyle() {
if (!uploadedImage || !selectedHairstyle) {
@@ -190,7 +322,12 @@ async function handleConfirmHairstyle() {
if (response.success) {
// 显示结果
elements.resultTitle.textContent = '发型更换效果';
showResult(response.data.result_image);
// 显示/隐藏相应的按钮
elements.reselectHairstyleBtn.style.display = 'block';
elements.reselectColorBtn.style.display = 'none';
} else {
alert(response.message || '处理失败，请重试');
}
@@ -216,6 +353,11 @@ function handleReselectHairstyle() {
showPage(elements.hairstylePage);
}
// 处理重新选择颜色
function handleReselectColor() {
showPage(elements.hairColorPage);
}
// 处理重新上传图片
function handleReuploadImage() {
// 重置图片上传
@@ -258,17 +400,24 @@ function handleSaveResult() {
// 处理返回按钮
function handleBack() {
if (elements.resultPage.classList.contains('active')) {
showPage(elements.hairstylePage);
if (currentFunction === 'hairstyle') {
showPage(elements.hairstylePage);
} else if (currentFunction === 'color') {
showPage(elements.hairColorPage);
}
} else if (elements.hairstylePage.classList.contains('active')) {
showPage(elements.homePage);
hideBackBtn();
} else if (elements.hairColorPage.classList.contains('active')) {
showPage(elements.homePage);
hideBackBtn();
}
}
// 显示页面
function showPage(page) {
// 隐藏所有页面
[elements.homePage, elements.hairstylePage, elements.resultPage].forEach(p => {
[elements.homePage, elements.hairstylePage, elements.hairColorPage, elements.resultPage].forEach(p => {
p.classList.remove('active');
});