File size: 2,900 Bytes
2ddf270 b011181 34fdf8c 1941435 34fdf8c 2ddf270 b011181 80824b5 e89342c 80824b5 e89342c 80824b5 e89342c 80824b5 e89342c 80824b5 e89342c b011181 80824b5 b011181 34fdf8c b011181 34fdf8c b011181 34fdf8c b011181 2ddf270 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload and Process Image</title>
<style>
#processedImage img {
max-width: 100%;
max-height: 400px; /* Adjust the maximum height as needed */
}
#loadingSpinner {
display: none;
}
.loader {
border: 4px solid #f3f3f3; /* Light grey */
border-top: 4px solid #3498db; /* Blue */
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h1>Upload and Process Image</h1>
<form id="uploadForm" action="/upload/" method="post" enctype="multipart/form-data">
<label for="file">Select Image:</label><br>
<input type="file" id="file" name="file" accept="image/*" required><br><br>
<label for="top">Top:</label><br>
<input type="number" id="top" name="top" value="200" required><br><br>
<label for="bottom">Bottom:</label><br>
<input type="number" id="bottom" name="bottom" value="200" required><br><br>
<label for="left">Left:</label><br>
<input type="number" id="left" name="left" value="200" required><br><br>
<label for="right">Right:</label><br>
<input type="number" id="right" name="right" value="200" required><br><br>
<button type="submit" onclick="uploadAndProcessImage()">Upload and Process Image</button>
</form>
<div id="loadingSpinner" class="loader"></div>
<div id="processedImage"></div>
<script>
async function uploadAndProcessImage() {
event.preventDefault();
const form = document.getElementById('uploadForm');
const formData = new FormData(form);
// Show loading spinner
document.getElementById('loadingSpinner').style.display = 'block';
document.getElementById('processedImage').innerHTML = '';
const response = await fetch('/upload/', {
method: 'POST',
body: formData
});
// Hide loading spinner
document.getElementById('loadingSpinner').style.display = 'none';
if (response.ok) {
const processedImage = await response.blob();
const imageUrl = URL.createObjectURL(processedImage);
document.getElementById('processedImage').innerHTML = `<img src="${imageUrl}" alt="Processed Image">`;
} else {
alert('Error processing image');
}
}
</script>
</body>
</html>
|