save code
This commit is contained in:
+186
@@ -0,0 +1,186 @@
|
||||
<!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://112.126.94.241: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://112.126.94.241: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://47.94.244.112: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>
|
||||
Reference in New Issue
Block a user