186 lines
6.0 KiB
HTML
186 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>图片处理工具</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
label {
|
|
font-weight: bold;
|
|
}
|
|
input[type="file"], input[type="text"] {
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
button {
|
|
padding: 10px 15px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
button:hover {
|
|
background-color: #45a049;
|
|
}
|
|
.preview {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
.preview-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.preview-item img {
|
|
max-width: 200px;
|
|
max-height: 200px;
|
|
border: 1px solid #ddd;
|
|
margin-top: 10px;
|
|
}
|
|
#status {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
.success {
|
|
background-color: #dff0d8;
|
|
color: #3c763d;
|
|
}
|
|
.error {
|
|
background-color: #f2dede;
|
|
color: #a94442;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>图片处理工具</h1>
|
|
<div class="container">
|
|
<form id="imageForm">
|
|
<div class="form-group">
|
|
<label for="fileUpload">上传图片:</label>
|
|
<input type="file" id="fileUpload" name="file" accept="image/*" required>
|
|
<div class="preview">
|
|
<div class="preview-item">
|
|
<span>上传的图片预览:</span>
|
|
<img id="uploadPreview" src="#" alt="上传的图片预览" style="display: none;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="clothImgUrl">服装图片URL:</label>
|
|
<input type="text" id="clothImgUrl" name="cloth_img"
|
|
value="http://117.50.44.174:18888/static/imgs/cloth_20250713_092536_279335d2.jpg"
|
|
placeholder="输入服装图片的URL" required>
|
|
<div class="preview">
|
|
<div class="preview-item">
|
|
<span>URL图片预览:</span>
|
|
<img id="urlPreview" src="http://117.50.44.174:18888/static/imgs/cloth_20250713_092536_279335d2.jpg"
|
|
alt="URL图片预览" onerror="this.style.display='none'">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit">提交处理</button>
|
|
</form>
|
|
|
|
<div id="status"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// 上传图片预览
|
|
document.getElementById('fileUpload').addEventListener('change', function(e) {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(event) {
|
|
const preview = document.getElementById('uploadPreview');
|
|
preview.src = event.target.result;
|
|
preview.style.display = 'block';
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
|
|
// URL图片预览
|
|
document.getElementById('clothImgUrl').addEventListener('input', function(e) {
|
|
const url = e.target.value;
|
|
if (url) {
|
|
const preview = document.getElementById('urlPreview');
|
|
preview.src = url;
|
|
preview.style.display = 'block';
|
|
|
|
// 检查图片是否能加载
|
|
preview.onerror = function() {
|
|
preview.alt = "无法加载图片";
|
|
preview.src = "";
|
|
};
|
|
}
|
|
});
|
|
|
|
// 表单提交
|
|
document.getElementById('imageForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const statusDiv = document.getElementById('status');
|
|
statusDiv.textContent = "正在提交...";
|
|
statusDiv.className = "";
|
|
|
|
const formData = new FormData(this);
|
|
const apiUrl = "http://117.50.44.174:19001/process-image";
|
|
|
|
fetch(apiUrl, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('网络响应不正常');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
statusDiv.textContent = "提交成功！";
|
|
statusDiv.className = "success";
|
|
console.log("成功:", data);
|
|
})
|
|
.catch(error => {
|
|
statusDiv.textContent = "提交失败: " + error.message;
|
|
statusDiv.className = "error";
|
|
console.error("错误:", error);
|
|
});
|
|
});
|
|
|
|
// 初始加载时检查默认URL图片
|
|
window.addEventListener('load', function() {
|
|
const preview = document.getElementById('urlPreview');
|
|
preview.onerror = function() {
|
|
preview.alt = "无法加载默认图片";
|
|
preview.src = "";
|
|
};
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |