aristide.manyesse/ImageReducer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout de la prise en charge des fichiers TIFF, amélioration de la gestion de la progression et mise à jour du Dockerfile pour inclure exiftool

Browse Source
This commit is contained in:
Aristide Manyessé
2025-07-17 14:20:00 +00:00
parent d873dd118a
commit 4d1361057a
6 changed files with 241 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
views/index.tpl
View File

@@ -1,13 +1,12 @@
<!-- views/index.tpl -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Réduction d'images</title>
<title>Réduction d’images</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: #f0f4f8;
background: #f8f9fa;
padding: 40px;
}
@@ -52,29 +51,25 @@
cursor: pointer;
}
button:hover {
background-color: #1d4ed8;
}
.loader {
display: none;
text-align: center;
margin-top: 40px;
}
.loader div {
border: 8px solid #f3f3f3;
border-top: 8px solid #2563eb;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
margin: auto;
.progress-bar-container {
width: 100%;
background-color: #e0e0e0;
border-radius: 6px;
height: 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
.progress-bar {
height: 100%;
background-color: #2563eb;
width: 0%;
border-radius: 6px;
transition: width 0.3s ease;
}
</style>
</head>
@@ -88,28 +83,47 @@
<label>Ratio de réduction :</label>
<select name="ratio" required>
<option value="1">1 (original)</option>
<option value="1.5">1.5 (réduction légère)</option>
<option value="1.5">1.5 (léger)</option>
<option value="2" selected>2 (moitié)</option>
<option value="3">3 (forte)</option>
<option value="4">4 (très forte)</option>
<option value="3">3 (fort)</option>
<option value="4">4 (très fort)</option>
</select>
<button type="submit">📥 Réduire et télécharger</button>
</form>
<div class="loader" id="loader">
<p>Traitement des images en cours... Patientez ⏳</p>
<div></div>
<p id="progressText">Traitement des images en cours...</p>
<div class="progress-bar-container">
<div class="progress-bar" id="progressBar"></div>
</div>
</div>
</div>
<script>
const form = document.getElementById("uploadForm");
const loader = document.getElementById("loader");
const progressBar = document.getElementById("progressBar");
const progressText = document.getElementById("progressText");
form.addEventListener("submit", function() {
form.style.display = "none";
loader.style.display = "block";
const interval = setInterval(async () => {
const res = await fetch('/progress');
const data = await res.json();
if (data.total === 0) return;
const percent = Math.floor((data.current / data.total) * 100);
progressBar.style.width = percent + '%';
progressText.textContent = `Traitement des images... ${data.current} / ${data.total}`;
if (data.current >= data.total) {
clearInterval(interval);
}
}, 500);
});
</script>
</body>