Historique des codes

Version 0.1

<title>Suppresseur de Publicités pour Bordereaux</title>

<style>

body {

font-family: 'Inter', sans-serif;

}

.a4-paper {

border: 2px solid #000;

display: grid;

grid-template-columns: repeat(2, 1fr);

grid-template-rows: repeat(2, 1fr);

cursor: pointer;

background-color: #f0f0f0; /* Couleur de fond initiale du papier */

}

.quadrant {

border: 1px dashed #666;

display: flex;

justify-content: center;

align-items: center;

transition: background-color 0.2s ease-in-out;

}

.quadrant:hover {

background-color: #e0e0e0;

}

.quadrant.selected {

background-color: #ffffff !important; /* Blanc pour la zone sélectionnée */

border: 2px solid #3b82f6; /* Bleu pour indiquer la sélection active */

}

/* Style pour le message d'erreur/info */

#message-box {

position: fixed;

top: 20px;

left: 50%;

transform: translateX(-50%);

padding: 10px 20px;

border-radius: 8px;

color: white;

z-index: 1000;

display: none; /* Caché par défaut */

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}

#message-box.success {

background-color: #28a745; /* Vert pour succès */

}

#message-box.error {

background-color: #dc3545; /* Rouge pour erreur */

}

#message-box.info {

background-color: #17a2b8; /* Bleu pour info */

}

/* Styles pour les icônes dans les quadrants (optionnel, pour visibilité) */

.quadrant-icon {

font-size: 10px; /* Ajustez la taille selon vos besoins */

color: #888;

}

/* Dimensions A4 Portrait: 210mm x 297mm. Ratio approx 1:1.414 */

/* Dimensions A4 Paysage: 297mm x 210mm. Ratio approx 1.414:1 */

/* Pour l'affichage, utilisons des tailles plus petites en gardant le ratio */

.portrait {

width: 100px; /* Largeur fixe pour l'icône portrait */

height: 141.4px; /* Hauteur calculée pour garder le ratio A4 */

}

.landscape {

width: 141.4px; /* Largeur fixe pour l'icône paysage */

height: 100px; /* Hauteur calculée pour garder le ratio A4 */

}

</style>

<h1 class="text-2xl md:text-3xl font-bold text-gray-800">Suppresseur de Publicités pour Bordereaux</h1>

<p class="text-gray-600 mt-2">Sélectionnez la zone de la publicité à masquer sur votre bordereau.</p>

</header>

<main>

<h2 class="text-xl font-semibold text-gray-700 mb-3 text-center">1. Choisissez l'orientation et la zone à masquer :</h2>

<div>

<p class="text-center text-sm font-medium text-gray-600 mb-1">Portrait</p>

</div>

<div>

<p class="text-center text-sm font-medium text-gray-600 mb-1">Paysage</p>

</div>

</section>

<h2 class="text-xl font-semibold text-gray-700 mb-3 text-center">2. Téléversez votre bordereau (image) :</h2>

<input type="file" id="imageUpload" accept="image/*" class="block w-full max-w-xs text-sm text-gray-500

file:mr-4 file:py-2 file:px-4

file:rounded-lg file:border-0

file:text-sm file:font-semibold

file:bg-blue-50 file:text-blue-700

hover:file:bg-blue-100

mb-4 p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">

Masquer la Publicité

</button>

</div>

</section>

<h2 class="text-xl font-semibold text-gray-700 mb-3 text-center">3. Résultat :</h2>

Télécharger l'image modifiée

</a>

</div>

</section>

</main>

</footer>

</div>

// Références aux éléments DOM

const portraitPaper = document.getElementById('portrait-paper');

const landscapePaper = document.getElementById('landscape-paper');

const allQuadrants = document.querySelectorAll('.quadrant');

const imageUpload = document.getElementById('imageUpload');

const processButton = document.getElementById('processButton');

const imageCanvas = document.getElementById('imageCanvas');

const downloadLink = document.getElementById('downloadLink');

const messageBox = document.getElementById('message-box');

const ctx = imageCanvas.getContext('2d');

// État de la sélection

let selectedQuadrantInfo = {

orientation: null, // 'portrait' ou 'landscape'

quadrantIndex: null // 0: TL, 1: TR, 2: BL, 3: BR

};

let uploadedImage = null;

// Fonction pour afficher les messages

function showMessage(text, type = 'info', duration = 3000) {

messageBox.textContent = text;

messageBox.className = ''; // Réinitialiser les classes

messageBox.classList.add(type); // Ajouter la classe de type (success, error, info)

messageBox.style.display = 'block';

setTimeout(() => {

messageBox.style.display = 'none';

}, duration);

}

// Gestion de la sélection des quadrants

allQuadrants.forEach(quadrant => {

quadrant.addEventListener('click', () => {

// Désélectionner tous les quadrants

allQuadrants.forEach(q => q.classList.remove('selected'));

// Sélectionner le quadrant cliqué

quadrant.classList.add('selected');

selectedQuadrantInfo.orientation = quadrant.dataset.orientation;

selectedQuadrantInfo.quadrantIndex = parseInt(quadrant.dataset.quadrant);

// Activer le bouton de traitement si une image est chargée et un quadrant est sélectionné

checkProcessButtonState();

showMessage(`Zone sélectionnée: ${selectedQuadrantInfo.orientation}, quadrant ${selectedQuadrantInfo.quadrantIndex + 1}`, 'info');

});

// Gestion du téléversement d'image

imageUpload.addEventListener('change', (event) => {

const file = event.target.files[0];

if (file && file.type.startsWith('image/')) {

const reader = new FileReader();

reader.onload = (e) => {

uploadedImage = new Image();

uploadedImage.onload = () => {

// Afficher l'image originale sur le canvas (optionnel, ou attendre le traitement)

// imageCanvas.width = uploadedImage.width;

// imageCanvas.height = uploadedImage.height;

// ctx.drawImage(uploadedImage, 0, 0);

// imageCanvas.style.display = 'block';

checkProcessButtonState();

showMessage('Image chargée avec succès.', 'success');

downloadLink.classList.add('hidden'); // Cacher le lien de téléchargement si une nouvelle image est chargée

};

uploadedImage.onerror = () => {

showMessage('Erreur lors du chargement de l\'image.', 'error');

uploadedImage = null;

checkProcessButtonState();

}

uploadedImage.src = e.target.result;

};

reader.readAsDataURL(file);

} else {

showMessage('Veuillez sélectionner un fichier image valide (JPEG, PNG, GIF, etc.).', 'error');

uploadedImage = null;

imageUpload.value = ''; // Réinitialiser le champ de fichier

checkProcessButtonState();

}

});

// Vérifier si le bouton de traitement doit être activé

function checkProcessButtonState() {

if (uploadedImage && selectedQuadrantInfo.quadrantIndex !== null) {

processButton.disabled = false;

} else {

processButton.disabled = true;

}

// Gestion du clic sur le bouton "Masquer la Publicité"

processButton.addEventListener('click', () => {

if (!uploadedImage) {

showMessage('Veuillez d\'abord téléverser une image.', 'error');

return;

}

if (selectedQuadrantInfo.quadrantIndex === null) {

showMessage('Veuillez sélectionner une zone à masquer sur les icônes A4.', 'error');

return;

}

// Configurer le canvas avec les dimensions de l'image

imageCanvas.width = uploadedImage.width;

imageCanvas.height = uploadedImage.height;

// Dessiner l'image originale

ctx.drawImage(uploadedImage, 0, 0);

// Calculer les coordonnées du rectangle blanc

const imgWidth = uploadedImage.width;

const imgHeight = uploadedImage.height;

let rectX, rectY, rectWidth, rectHeight;

rectWidth = imgWidth / 2;

rectHeight = imgHeight / 2;

switch (selectedQuadrantInfo.quadrantIndex) {

case 0: // Haut Gauche

rectX = 0;

rectY = 0;

break;

case 1: // Haut Droite

rectX = imgWidth / 2;

rectY = 0;

break;

case 2: // Bas Gauche

rectX = 0;

rectY = imgHeight / 2;

break;

case 3: // Bas Droite

rectX = imgWidth / 2;

rectY = imgHeight / 2;

break;

}

// Dessiner le rectangle blanc

ctx.fillStyle = 'white';

ctx.fillRect(rectX, rectY, rectWidth, rectHeight);

// Afficher le canvas et le lien de téléchargement

imageCanvas.style.display = 'block';

downloadLink.href = imageCanvas.toDataURL('image/png'); // Proposer en PNG par défaut

downloadLink.download = 'bordereau_modifie.png';

downloadLink.classList.remove('hidden');

showMessage('Publicité masquée ! Vous pouvez télécharger l\'image.', 'success');

});

// Initialiser l'état du bouton

checkProcessButtonState();

</script>

Version 0.2

<title>Suppresseur de Publicités pour Bordereaux</title>

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';

</script>

<style>

body {

font-family: 'Inter', sans-serif;

}

.a4-paper {

border: 2px solid #000;

display: grid;

grid-template-columns: repeat(2, 1fr);

grid-template-rows: repeat(2, 1fr);

cursor: pointer;

background-color: #f0f0f0;

}

.quadrant {

border: 1px dashed #666;

display: flex;

justify-content: center;

align-items: center;

transition: background-color 0.2s ease-in-out;

}

.quadrant:hover {

background-color: #e0e0e0;

}

.quadrant.selected {

background-color: #ffffff !important;

border: 2px solid #3b82f6;

}

#message-box {

position: fixed;

top: 20px;

left: 50%;

transform: translateX(-50%);

padding: 10px 20px;

border-radius: 8px;

color: white;

z-index: 1000;

display: none;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}

#message-box.success { background-color: #28a745; }

#message-box.error { background-color: #dc3545; }

#message-box.info { background-color: #17a2b8; }

.quadrant-icon { font-size: 10px; color: #888; }

.portrait { width: 100px; height: 141.4px; }

.landscape { width: 141.4px; height: 100px; }

#imageCanvas {

cursor: grab; /* Curseur pour indiquer que la zone est déplaçable */

}

#imageCanvas.dragging {

cursor: grabbing;

}

</style>

<h1 class="text-2xl md:text-3xl font-bold text-gray-800">Suppresseur de Publicités pour Bordereaux</h1>

<p class="text-gray-600 mt-2">Masquez les publicités sur vos bordereaux Vinted et autres.</p>

</header>

<main>

<h2 class="text-xl font-semibold text-gray-700 mb-3 text-center">1. Choisissez la zone initiale de la publicité :</h2>

<div>

<p class="text-center text-sm font-medium text-gray-600 mb-1">Portrait</p>

</div>

<div>

<p class="text-center text-sm font-medium text-gray-600 mb-1">Paysage</p>

</div>

</section>

<h2 class="text-xl font-semibold text-gray-700 mb-3 text-center">2. Téléversez votre bordereau (Image ou PDF) :</h2>

<input type="file" id="imageUpload" accept="image/*,application/pdf" class="block w-full max-w-xs text-sm text-gray-500

file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold

file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100

mb-4 p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">

</div>

</section>

<h2 class="text-xl font-semibold text-gray-700 mb-3">3. Ajustez la zone et validez :</h2>

Afficher l'image et ajuster la zone

</button>

Masquer la Pub et Télécharger

</button>

</div>

</section>

</main>

</div>

// Références DOM

const allQuadrants = document.querySelectorAll('.quadrant');

const imageUpload = document.getElementById('imageUpload');

const initiateProcessingButton = document.getElementById('initiateProcessingButton');

const imageCanvas = document.getElementById('imageCanvas');

const applyAndDownloadButton = document.getElementById('applyAndDownloadButton');

const messageBox = document.getElementById('message-box');

const ctx = imageCanvas.getContext('2d');

// Sections UI

const step1Selection = document.getElementById('step1Selection');

const step2Upload = document.getElementById('step2Upload');

const step3Adjust = document.getElementById('step3Adjust');

// État global

let selectedQuadrantInfo = { orientation: null, quadrantIndex: null };

let uploadedImage = null; // Contiendra l'objet Image (après chargement direct ou conversion PDF)

let pdfDoc = null; // Pour stocker le document PDF chargé

let currentSelectionRect = { x: 0, y: 0, w: 0, h: 0, isDefined: false };

let isDraggingSelection = false;

let dragStartCoords = { x: 0, y: 0 }; // Coordonnées souris au début du drag

let rectStartCoords = { x: 0, y: 0 }; // Coordonnées du rectangle au début du drag

// --- Fonctions Utilitaires ---

function showMessage(text, type = 'info', duration = 3500) {

messageBox.textContent = text;

messageBox.className = ''; // Reset classes

messageBox.classList.add(type);

messageBox.style.display = 'block';

setTimeout(() => { messageBox.style.display = 'none'; }, duration);

}

function checkInitiateButtonState() {

initiateProcessingButton.disabled = !(uploadedImage && selectedQuadrantInfo.quadrantIndex !== null);

}

// --- Gestion des Événements ---

// 1. Sélection du Quadrant Initial

allQuadrants.forEach(quadrant => {

quadrant.addEventListener('click', () => {

allQuadrants.forEach(q => q.classList.remove('selected'));

quadrant.classList.add('selected');

selectedQuadrantInfo.orientation = quadrant.dataset.orientation;

selectedQuadrantInfo.quadrantIndex = parseInt(quadrant.dataset.quadrant);

checkInitiateButtonState();

showMessage(`Zone initiale: ${selectedQuadrantInfo.orientation}, quadrant ${selectedQuadrantInfo.quadrantIndex + 1}. Téléversez une image/PDF.`, 'info');

});

// 2. Téléversement Image/PDF

imageUpload.addEventListener('change', (event) => {

const file = event.target.files[0];

if (!file) return;

resetCanvasAndState(); // Réinitialiser si un nouveau fichier est chargé

if (file.type.startsWith('image/')) {

const reader = new FileReader();

reader.onload = (e) => {

uploadedImage = new Image();

uploadedImage.onload = () => {

showMessage('Image chargée. Cliquez sur "Afficher et ajuster".', 'success');

checkInitiateButtonState();

};

uploadedImage.onerror = () => {

showMessage('Erreur de chargement de l\'image.', 'error'); uploadedImage = null;

}

uploadedImage.src = e.target.result;

};

reader.readAsDataURL(file);

} else if (file.type === 'application/pdf') {

const fileReader = new FileReader();

fileReader.onload = function() {

const typedarray = new Uint8Array(this.result);

pdfjsLib.getDocument(typedarray).promise.then(pdfDoc_ => {

pdfDoc = pdfDoc_;

renderPdfPage(1); // Afficher la première page

}).catch(err => {

showMessage('Erreur chargement PDF: ' + (err.message || err), 'error'); uploadedImage = null;

checkInitiateButtonState();

});

};

fileReader.readAsArrayBuffer(file);

} else {

showMessage('Type de fichier non supporté. Utilisez JPEG, PNG, GIF ou PDF.', 'error');

uploadedImage = null;

imageUpload.value = '';

}

checkInitiateButtonState();

});

function renderPdfPage(pageNum) {

if (!pdfDoc) return;

pdfDoc.getPage(pageNum).then(page => {

const viewport = page.getViewport({ scale: 2.0 }); // Augmenter l'échelle pour une meilleure qualité

const tempCanvas = document.createElement('canvas');

const tempCtx = tempCanvas.getContext('2d');

tempCanvas.height = viewport.height;

tempCanvas.width = viewport.width;

page.render({ canvasContext: tempCtx, viewport: viewport }).promise.then(() => {

uploadedImage = new Image();

uploadedImage.onload = () => {

showMessage('Page PDF chargée. Cliquez sur "Afficher et ajuster".', 'success');

checkInitiateButtonState();

};

uploadedImage.onerror = () => {

showMessage('Erreur conversion PDF en image.', 'error'); uploadedImage = null;

}

uploadedImage.src = tempCanvas.toDataURL('image/png'); // Convertir en PNG pour qualité

});

}).catch(err => {

showMessage('Erreur rendu page PDF: ' + (err.message || err), 'error'); uploadedImage = null;

checkInitiateButtonState();

});

}

// 3. Bouton "Afficher l'image et ajuster la zone"

initiateProcessingButton.addEventListener('click', () => {

if (!uploadedImage || selectedQuadrantInfo.quadrantIndex === null) {

showMessage('Veuillez sélectionner une zone initiale ET téléverser un fichier.', 'error');

return;

}

setupInteractiveStage();

initiateProcessingButton.classList.add('hidden');

applyAndDownloadButton.classList.remove('hidden');

imageCanvas.style.display = 'block';

showMessage('Ajustez le rectangle rouge, puis validez.', 'info');

});

function setupInteractiveStage() {

imageCanvas.width = uploadedImage.width;

imageCanvas.height = uploadedImage.height;

// Calcul du rectangle initial basé sur le quadrant

const imgW = uploadedImage.width;

const imgH = uploadedImage.height;

currentSelectionRect.w = imgW / 2;

currentSelectionRect.h = imgH / 2;

switch (selectedQuadrantInfo.quadrantIndex) {

case 0: currentSelectionRect.x = 0; currentSelectionRect.y = 0; break; // HG

case 1: currentSelectionRect.x = imgW / 2; currentSelectionRect.y = 0; break; // HD

case 2: currentSelectionRect.x = 0; currentSelectionRect.y = imgH / 2; break; // BG

case 3: currentSelectionRect.x = imgW / 2; currentSelectionRect.y = imgH / 2; break; // BD

}

currentSelectionRect.isDefined = true;

drawCanvasWithSelection();

}

function drawCanvasWithSelection(isFinal=false) {

if (!uploadedImage) return;

ctx.clearRect(0, 0, imageCanvas.width, imageCanvas.height);

ctx.drawImage(uploadedImage, 0, 0);

if (currentSelectionRect.isDefined) {

if (isFinal) {

ctx.fillStyle = 'white';

ctx.fillRect(currentSelectionRect.x, currentSelectionRect.y, currentSelectionRect.w, currentSelectionRect.h);

} else {

ctx.strokeStyle = 'red';

ctx.lineWidth = 3;

ctx.strokeRect(currentSelectionRect.x, currentSelectionRect.y, currentSelectionRect.w, currentSelectionRect.h);

// Dessiner une petite poignée (optionnel, pour indiquer la déplaçabilité)

ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';

ctx.fillRect(currentSelectionRect.x + currentSelectionRect.w/2 - 10, currentSelectionRect.y + currentSelectionRect.h/2 - 10, 20, 20);

}

// Gestion du glisser-déposer du rectangle de sélection

imageCanvas.addEventListener('mousedown', (e) => {

if (!currentSelectionRect.isDefined || !uploadedImage) return;

const rect = imageCanvas.getBoundingClientRect();

const mouseX = (e.clientX - rect.left) * (imageCanvas.width / rect.width);

const mouseY = (e.clientY - rect.top) * (imageCanvas.height / rect.height);

// Vérifier si le clic est dans le rectangle

if (mouseX >= currentSelectionRect.x && mouseX <= currentSelectionRect.x + currentSelectionRect.w &&

mouseY >= currentSelectionRect.y && mouseY <= currentSelectionRect.y + currentSelectionRect.h) {

isDraggingSelection = true;

imageCanvas.classList.add('dragging');

dragStartCoords.x = mouseX;

dragStartCoords.y = mouseY;

rectStartCoords.x = currentSelectionRect.x;

rectStartCoords.y = currentSelectionRect.y;

}

});

imageCanvas.addEventListener('mousemove', (e) => {

if (!isDraggingSelection || !currentSelectionRect.isDefined || !uploadedImage) return;

const rect = imageCanvas.getBoundingClientRect();

const mouseX = (e.clientX - rect.left) * (imageCanvas.width / rect.width);

const mouseY = (e.clientY - rect.top) * (imageCanvas.height / rect.height);

const deltaX = mouseX - dragStartCoords.x;

const deltaY = mouseY - dragStartCoords.y;

currentSelectionRect.x = rectStartCoords.x + deltaX;

currentSelectionRect.y = rectStartCoords.y + deltaY;

// Contraintes pour que le rectangle ne sorte pas du canvas

currentSelectionRect.x = Math.max(0, Math.min(currentSelectionRect.x, imageCanvas.width - currentSelectionRect.w));

currentSelectionRect.y = Math.max(0, Math.min(currentSelectionRect.y, imageCanvas.height - currentSelectionRect.h));

drawCanvasWithSelection();

});

imageCanvas.addEventListener('mouseup', () => {

if (isDraggingSelection) {

isDraggingSelection = false;

imageCanvas.classList.remove('dragging');

}

});

imageCanvas.addEventListener('mouseleave', () => { // Arrêter le drag si la souris quitte le canvas

if (isDraggingSelection) {

isDraggingSelection = false;

imageCanvas.classList.remove('dragging');

}

});

// 4. Bouton "Masquer la Pub et Télécharger"

applyAndDownloadButton.addEventListener('click', () => {

if (!currentSelectionRect.isDefined || !uploadedImage) {

showMessage('Aucune zone valide définie ou image chargée.', 'error');

return;

}

drawCanvasWithSelection(true); // true pour dessiner le rectangle blanc final

// Logique de téléchargement améliorée pour iOS

try {

const dataURL = imageCanvas.toDataURL('image/png');

const newWindow = window.open();

if (newWindow) {

newWindow.document.write('<img src="' + dataURL + '" alt="Image modifiée" style="max-width:100%;"/> <br><p>Sur mobile, maintenez l\'appui sur l\'image pour l\'enregistrer. Sur ordinateur, clic droit > Enregistrer l\'image sous...</p>');

showMessage('Image prête dans un nouvel onglet.', 'success');

} else {

// Si window.open est bloqué, fournir un lien direct (peut ne pas fonctionner sur iOS pour le téléchargement direct)

const link = document.createElement('a');

link.href = dataURL;

link.download = 'bordereau_modifie.png';

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

showMessage('Tentative de téléchargement direct. Si bloqué, vérifiez les pop-ups.', 'info');

}

} catch (err) {

showMessage('Erreur lors de la préparation du téléchargement: ' + (err.message || err), 'error');

}

// Réinitialiser pour une nouvelle opération

// resetCanvasAndState(); // Optionnel: ou laisser l'utilisateur recommencer manuellement

initiateProcessingButton.classList.remove('hidden');

applyAndDownloadButton.classList.add('hidden');

// imageCanvas.style.display = 'none'; // Cacher le canvas après téléchargement

});

function resetCanvasAndState() {

ctx.clearRect(0, 0, imageCanvas.width, imageCanvas.height);

imageCanvas.style.display = 'none';

uploadedImage = null;

pdfDoc = null;

currentSelectionRect.isDefined = false;

isDraggingSelection = false;

initiateProcessingButton.disabled = true;

initiateProcessingButton.classList.remove('hidden');

applyAndDownloadButton.classList.add('hidden');

imageUpload.value = ''; // Important pour permettre de re-téléverser le même fichier

// Ne pas réinitialiser selectedQuadrantInfo ici, l'utilisateur peut vouloir l'utiliser à nouveau

}

// Initialisation

checkInitiateButtonState();

</script>

Version 0.3

<!DOCTYPE html>

<head>

<title>Suppresseur de Publicités pour Bordereaux</title>

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';

</script>

<style>

body {

font-family: 'Inter', sans-serif;

}

.a4-paper {

border: 2px solid #000;

display: grid;

grid-template-columns: repeat(2, 1fr);

grid-template-rows: repeat(2, 1fr);

cursor: pointer;

background-color: #f0f0f0;

}

.quadrant {

border: 1px dashed #666;

display: flex;

justify-content: center;

align-items: center;

transition: background-color 0.2s ease-in-out;

}

.quadrant:hover {

background-color: #e0e0e0;

}

.quadrant.selected {

background-color: #ffffff !important;

border: 2px solid #3b82f6;

}

#message-box {

position: fixed;

top: 20px;

left: 50%;

transform: translateX(-50%);

padding: 10px 20px;

border-radius: 8px;

color: white;

z-index: 1000;

display: none;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}

#message-box.success { background-color: #28a745; }

#message-box.error { background-color: #dc3545; }

#message-box.info { background-color: #17a2b8; }

.quadrant-icon { font-size: 10px; color: #888; }

.portrait { width: 100px; height: 141.4px; }

.landscape { width: 141.4px; height: 100px; }

#imageCanvas {

/* Le curseur sera géré dynamiquement par JavaScript */

}

.handle { /* Style pour les poignées de redimensionnement */

position: absolute; /* Positionné par JS */

width: 10px;

height: 10px;

background-color: rgba(255, 0, 0, 0.7);

border: 1px solid rgba(255, 255, 255, 0.9);

border-radius: 50%; /* Rond pour une meilleure prise */

z-index: 10; /* Au-dessus du canvas mais sous les messages */

}

</style>

</head>

<h1 class="text-2xl md:text-3xl font-bold text-gray-800">Suppresseur de Publicités pour Bordereaux</h1>

<p class="text-gray-600 mt-2">Masquez les publicités sur vos bordereaux Vinted et autres.</p>

</header>

<main>

<h2 class="text-xl font-semibold text-gray-700 mb-3 text-center">1. Choisissez la zone initiale approximative :</h2>

<div>

<p class="text-center text-sm font-medium text-gray-600 mb-1">Portrait</p>

</div>

<div>

<p class="text-center text-sm font-medium text-gray-600 mb-1">Paysage</p>

</div>

</section>

<h2 class="text-xl font-semibold text-gray-700 mb-3 text-center">2. Téléversez votre bordereau (Image ou PDF) :</h2>

<input type="file" id="imageUpload" accept="image/*,application/pdf" class="block w-full max-w-xs text-sm text-gray-500

file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold

file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100

mb-4 p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">

</div>

</section>

<h2 class="text-xl font-semibold text-gray-700 mb-3">3. Ajustez la zone et validez :</h2>

Afficher et Ajuster la Zone

</button>

</div>

Masquer la Pub et Télécharger

</button>

</section>

</main>

</div>

// Références DOM

const allQuadrants = document.querySelectorAll('.quadrant');

const imageUpload = document.getElementById('imageUpload');

const initiateProcessingButton = document.getElementById('initiateProcessingButton');

const imageCanvas = document.getElementById('imageCanvas');

const canvasContainer = document.getElementById('canvasContainer');

const applyAndDownloadButton = document.getElementById('applyAndDownloadButton');

const messageBox = document.getElementById('message-box');

const ctx = imageCanvas.getContext('2d');

// État global

let selectedQuadrantInfo = { orientation: null, quadrantIndex: null };

let uploadedImage = null;

let pdfDoc = null;

let currentSelectionRect = { x: 0, y: 0, w: 0, h: 0, isDefined: false };

let activeDragAction = null; // 'move', 'resize-tl', 'resize-t', 'resize-tr', etc.

let dragStartCoords = { x: 0, y: 0 };

let rectStartCoords = { x: 0, y: 0, w: 0, h: 0 };

const HANDLE_SIZE = 10; // Taille des poignées de redimensionnement

let handles = []; // Pour stocker les éléments DOM des poignées

// --- Fonctions Utilitaires ---

function showMessage(text, type = 'info', duration = 3500) {

messageBox.textContent = text;

messageBox.className = '';

messageBox.classList.add(type);

messageBox.style.display = 'block';

setTimeout(() => { messageBox.style.display = 'none'; }, duration);

}

function checkInitiateButtonState() {

initiateProcessingButton.disabled = !(uploadedImage && selectedQuadrantInfo.quadrantIndex !== null);

}

// --- Gestion des Événements ---

// 1. Sélection du Quadrant Initial

allQuadrants.forEach(quadrant => {

quadrant.addEventListener('click', () => {

allQuadrants.forEach(q => q.classList.remove('selected'));

quadrant.classList.add('selected');

selectedQuadrantInfo.orientation = quadrant.dataset.orientation;

selectedQuadrantInfo.quadrantIndex = parseInt(quadrant.dataset.quadrant);

checkInitiateButtonState();

showMessage(`Zone initiale: ${selectedQuadrantInfo.orientation}, quadrant ${selectedQuadrantInfo.quadrantIndex + 1}. Téléversez une image/PDF.`, 'info');

});

// 2. Téléversement Image/PDF

imageUpload.addEventListener('change', (event) => {

const file = event.target.files[0];

if (!file) return;

resetCanvasAndState();

if (file.type.startsWith('image/')) {

const reader = new FileReader();

reader.onload = (e) => {

uploadedImage = new Image();

uploadedImage.onload = () => {

showMessage('Image chargée. Cliquez sur "Afficher et Ajuster".', 'success');

checkInitiateButtonState();

};

uploadedImage.onerror = () => {

showMessage('Erreur de chargement de l\'image.', 'error'); uploadedImage = null;

}

uploadedImage.src = e.target.result;

};

reader.readAsDataURL(file);

} else if (file.type === 'application/pdf') {

const fileReader = new FileReader();

fileReader.onload = function() {

const typedarray = new Uint8Array(this.result);

pdfjsLib.getDocument(typedarray).promise.then(pdfDoc_ => {

pdfDoc = pdfDoc_;

renderPdfPage(1);

}).catch(err => {

showMessage('Erreur chargement PDF: ' + (err.message || err), 'error'); uploadedImage = null;

checkInitiateButtonState();

});

};

fileReader.readAsArrayBuffer(file);

} else {

showMessage('Type de fichier non supporté. Utilisez JPEG, PNG, GIF ou PDF.', 'error');

uploadedImage = null; imageUpload.value = '';

}

checkInitiateButtonState();

});

function renderPdfPage(pageNum) {

if (!pdfDoc) return;

pdfDoc.getPage(pageNum).then(page => {

const viewport = page.getViewport({ scale: 2.5 }); // Échelle augmentée pour meilleure qualité

const tempCanvas = document.createElement('canvas');

const tempCtx = tempCanvas.getContext('2d');

tempCanvas.height = viewport.height;

tempCanvas.width = viewport.width;

page.render({ canvasContext: tempCtx, viewport: viewport }).promise.then(() => {

uploadedImage = new Image();

uploadedImage.onload = () => {

showMessage('Page PDF chargée. Cliquez sur "Afficher et Ajuster".', 'success');

checkInitiateButtonState();

};

uploadedImage.onerror = () => {

showMessage('Erreur conversion PDF en image.', 'error'); uploadedImage = null;

}

uploadedImage.src = tempCanvas.toDataURL('image/png');

});

}).catch(err => {

showMessage('Erreur rendu page PDF: ' + (err.message || err), 'error'); uploadedImage = null;

checkInitiateButtonState();

});

}

// 3. Bouton "Afficher et Ajuster la Zone"

initiateProcessingButton.addEventListener('click', () => {

if (!uploadedImage || selectedQuadrantInfo.quadrantIndex === null) {

showMessage('Veuillez sélectionner une zone initiale ET téléverser un fichier.', 'error');

return;

}

setupInteractiveStage();

initiateProcessingButton.classList.add('hidden');

applyAndDownloadButton.classList.remove('hidden');

imageCanvas.style.display = 'block';

showMessage('Ajustez le rectangle (déplacez/redimensionnez), puis validez.', 'info');

});

function setupInteractiveStage() {

imageCanvas.width = uploadedImage.width;

imageCanvas.height = uploadedImage.height;

const imgW = uploadedImage.width;

const imgH = uploadedImage.height;

currentSelectionRect.w = imgW / 2;

currentSelectionRect.h = imgH / 2;

switch (selectedQuadrantInfo.quadrantIndex) {

case 0: currentSelectionRect.x = 0; currentSelectionRect.y = 0; break;

case 1: currentSelectionRect.x = imgW / 2; currentSelectionRect.y = 0; break;

case 2: currentSelectionRect.x = 0; currentSelectionRect.y = imgH / 2; break;

case 3: currentSelectionRect.x = imgW / 2; currentSelectionRect.y = imgH / 2; break;

}

currentSelectionRect.isDefined = true;

createHandles();

drawCanvasWithSelectionAndHandles();

}

function drawCanvasWithSelectionAndHandles(isFinal = false) {

if (!uploadedImage) return;

ctx.clearRect(0, 0, imageCanvas.width, imageCanvas.height);

ctx.drawImage(uploadedImage, 0, 0);

if (currentSelectionRect.isDefined) {

if (isFinal) {

ctx.fillStyle = 'white';

ctx.fillRect(currentSelectionRect.x, currentSelectionRect.y, currentSelectionRect.w, currentSelectionRect.h);

removeHandles(); // Cacher les poignées pour l'image finale

} else {

ctx.strokeStyle = 'rgba(255, 0, 0, 0.8)';

ctx.lineWidth = 2;

ctx.strokeRect(currentSelectionRect.x, currentSelectionRect.y, currentSelectionRect.w, currentSelectionRect.h);

updateHandlesPositions();

}

function createHandles() {

removeHandles(); // S'assurer qu'il n'y a pas d'anciennes poignées

const handleTypes = ['tl', 't', 'tr', 'l', 'r', 'bl', 'b', 'br']; // Top-Left, Top, Top-Right, etc.

handleTypes.forEach(type => {

const handle = document.createElement('div');

handle.classList.add('handle');

handle.dataset.type = type;

canvasContainer.appendChild(handle);

handles.push(handle);

});

updateHandlesPositions(); // Positionner correctement

}

function removeHandles() {

handles.forEach(h => h.remove());

handles = [];

}

function updateHandlesPositions() {

if (!currentSelectionRect.isDefined || handles.length === 0) return;

const { x, y, w, h } = currentSelectionRect;

const canvasRect = imageCanvas.getBoundingClientRect(); // Pour positionner les poignées par rapport au canvas affiché

const scaleX = canvasRect.width / imageCanvas.width;

const scaleY = canvasRect.height / imageCanvas.height;

const positions = {

'tl': { left: x * scaleX - HANDLE_SIZE / 2, top: y * scaleY - HANDLE_SIZE / 2 },

't': { left: (x + w / 2) * scaleX - HANDLE_SIZE / 2, top: y * scaleY - HANDLE_SIZE / 2 },

'tr': { left: (x + w) * scaleX - HANDLE_SIZE / 2, top: y * scaleY - HANDLE_SIZE / 2 },

'l': { left: x * scaleX - HANDLE_SIZE / 2, top: (y + h / 2) * scaleY - HANDLE_SIZE / 2 },

'r': { left: (x + w) * scaleX - HANDLE_SIZE / 2, top: (y + h / 2) * scaleY - HANDLE_SIZE / 2 },

'bl': { left: x * scaleX - HANDLE_SIZE / 2, top: (y + h) * scaleY - HANDLE_SIZE / 2 },

'b': { left: (x + w / 2) * scaleX - HANDLE_SIZE / 2, top: (y + h) * scaleY - HANDLE_SIZE / 2 },

'br': { left: (x + w) * scaleX - HANDLE_SIZE / 2, top: (y + h) * scaleY - HANDLE_SIZE / 2 }

};

handles.forEach(handle => {

const type = handle.dataset.type;

handle.style.left = `${positions[type].left}px`;

handle.style.top = `${positions[type].top}px`;

handle.style.cursor = getResizeCursor(type);

handle.style.display = 'block';

});

}

function getResizeCursor(handleType) {

switch (handleType) {

case 'tl': case 'br': return 'nwse-resize';

case 'tr': case 'bl': return 'nesw-resize';

case 't': case 'b': return 'ns-resize';

case 'l': case 'r': return 'ew-resize';

default: return 'default';

}

// Convertir les coordonnées de la souris de l'écran vers le canvas

function getMousePosOnCanvas(event) {

const rect = imageCanvas.getBoundingClientRect();

return {

x: (event.clientX - rect.left) * (imageCanvas.width / rect.width),

y: (event.clientY - rect.top) * (imageCanvas.height / rect.height)

};

}

// Gestion du Drag & Resize

canvasContainer.addEventListener('mousedown', (e) => {

if (!currentSelectionRect.isDefined || !uploadedImage) return;

const target = e.target;

const mousePos = getMousePosOnCanvas(e);

if (target.classList.contains('handle')) { // Clic sur une poignée

activeDragAction = `resize-${target.dataset.type}`;

} else if (target === imageCanvas && // Clic sur le canvas

mousePos.x >= currentSelectionRect.x && mousePos.x <= currentSelectionRect.x + currentSelectionRect.w &&

mousePos.y >= currentSelectionRect.y && mousePos.y <= currentSelectionRect.y + currentSelectionRect.h) {

activeDragAction = 'move';

} else {

return; // Clic en dehors

}

dragStartCoords = mousePos;

rectStartCoords = { ...currentSelectionRect }; // Copie de l'état initial du rectangle

e.preventDefault(); // Empêcher la sélection de texte, etc.

});

document.addEventListener('mousemove', (e) => { // Écouter sur document pour un drag plus fluide

if (!activeDragAction || !currentSelectionRect.isDefined) {

// Mettre à jour le curseur si on survole le canvas ou les poignées

if (e.target === imageCanvas || e.target.classList.contains('handle')) {

const mousePos = getMousePosOnCanvas(e);

let cursor = 'default';

if (currentSelectionRect.isDefined) {

// Vérifier si on survole une poignée (même si pas en drag)

for (const handle of handles) {

const handleRect = handle.getBoundingClientRect();

const canvasRect = imageCanvas.getBoundingClientRect();

// Convertir les coordonnées de la poignée en coordonnées relatives au canvas

const handleCanvasX = (handleRect.left - canvasRect.left + HANDLE_SIZE/2) * (imageCanvas.width / canvasRect.width);

const handleCanvasY = (handleRect.top - canvasRect.top + HANDLE_SIZE/2) * (imageCanvas.height / canvasRect.height);

// Petite zone de tolérance pour la détection du survol de la poignée

if (Math.abs(mousePos.x - handleCanvasX) < HANDLE_SIZE && Math.abs(mousePos.y - handleCanvasY) < HANDLE_SIZE * 2) {

cursor = getResizeCursor(handle.dataset.type);

break;

}

if (cursor === 'default' && // Si pas sur une poignée, vérifier si sur le rectangle

mousePos.x >= currentSelectionRect.x && mousePos.x <= currentSelectionRect.x + currentSelectionRect.w &&

mousePos.y >= currentSelectionRect.y && mousePos.y <= currentSelectionRect.y + currentSelectionRect.h) {

cursor = 'move';

}

imageCanvas.style.cursor = cursor;

}

return;

}

const mousePos = getMousePosOnCanvas(e);

const deltaX = mousePos.x - dragStartCoords.x;

const deltaY = mousePos.y - dragStartCoords.y;

let { x, y, w, h } = rectStartCoords; // Partir de l'état au début du drag

if (activeDragAction === 'move') {

x += deltaX;

y += deltaY;

} else if (activeDragAction.startsWith('resize-')) {

const type = activeDragAction.split('-')[1];

if (type.includes('l')) { x += deltaX; w -= deltaX; }

if (type.includes('r')) { w += deltaX; }

if (type.includes('t')) { y += deltaY; h -= deltaY; }

if (type.includes('b')) { h += deltaY; }

}

// Assurer que la largeur/hauteur ne deviennent pas négatives ou trop petites

const minSize = 20; // Taille minimale pour le rectangle

if (w < minSize) {

if (activeDragAction.includes('l')) x = rectStartCoords.x + rectStartCoords.w - minSize;

w = minSize;

}

if (h < minSize) {

if (activeDragAction.includes('t')) y = rectStartCoords.y + rectStartCoords.h - minSize;

h = minSize;

}

// Contraintes pour que le rectangle ne sorte pas du canvas

x = Math.max(0, Math.min(x, imageCanvas.width - w));

y = Math.max(0, Math.min(y, imageCanvas.height - h));

// S'assurer que w et h ne dépassent pas les limites du canvas après déplacement de x,y

w = Math.min(w, imageCanvas.width - x);

h = Math.min(h, imageCanvas.height - y);

currentSelectionRect = { x, y, w, h, isDefined: true };

drawCanvasWithSelectionAndHandles();

e.preventDefault();

});

document.addEventListener('mouseup', (e) => {

if (activeDragAction) {

activeDragAction = null;

imageCanvas.style.cursor = 'default'; // Réinitialiser le curseur

// S'assurer que les poignées sont bien positionnées après le drag

updateHandlesPositions();

}

});

// 4. Bouton "Masquer la Pub et Télécharger"

applyAndDownloadButton.addEventListener('click', () => {

if (!currentSelectionRect.isDefined || !uploadedImage) {

showMessage('Aucune zone valide définie ou image chargée.', 'error');

return;

}

drawCanvasWithSelectionAndHandles(true); // true pour dessiner le rectangle blanc final

try {

const dataURL = imageCanvas.toDataURL('image/png');

const link = document.createElement('a');

link.href = dataURL;

link.download = 'bordereau_modifie.png';

// Tentative de téléchargement direct

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

showMessage('Téléchargement lancé...', 'success');

} catch (err) {

showMessage('Erreur lors de la préparation du téléchargement. Essayez d\'enregistrer l\'image manuellement.', 'error');

// Fallback: ouvrir dans une nouvelle fenêtre si le téléchargement direct échoue ou est bloqué

try {

const dataURL = imageCanvas.toDataURL('image/png');

const newWindow = window.open();

if (newWindow) {

newWindow.document.write('<img src="' + dataURL + '" alt="Image modifiée" style="max-width:100%;"/> <br><p>Sur mobile, maintenez l\'appui sur l\'image pour l\'enregistrer. Sur ordinateur, clic droit > Enregistrer l\'image sous...</p>');

showMessage('Image prête dans un nouvel onglet (téléchargement direct a pu échouer).', 'info');

} else {

showMessage('Impossible d\'ouvrir un nouvel onglet. Veuillez vérifier les bloqueurs de pop-up.', 'error');

}

} catch (fallbackError) {

showMessage('Erreur critique de téléchargement: ' + (fallbackError.message || fallbackError), 'error');

}

initiateProcessingButton.classList.remove('hidden');

applyAndDownloadButton.classList.add('hidden');

removeHandles(); // Nettoyer les poignées après l'opération

// imageCanvas.style.display = 'none'; // Optionnel: cacher le canvas

});

function resetCanvasAndState() {

ctx.clearRect(0, 0, imageCanvas.width, imageCanvas.height);

imageCanvas.style.display = 'none';

removeHandles();

uploadedImage = null;

pdfDoc = null;

currentSelectionRect.isDefined = false;

activeDragAction = null;

initiateProcessingButton.disabled = true;

initiateProcessingButton.classList.remove('hidden');

applyAndDownloadButton.classList.add('hidden');

imageUpload.value = '';

}

// Initialisation

checkInitiateButtonState();

window.addEventListener('resize', () => { // Mettre à jour la position des poignées si la fenêtre est redimensionnée

if (currentSelectionRect.isDefined && handles.length > 0) {

updateHandlesPositions();

}

});

</script>

</body>

</html>

Version 1.0

<!DOCTYPE html>

<head>

<title>Suppresseur de Publicités pour Bordereaux</title>

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';

</script>

<style>

body {

font-family: 'Inter', sans-serif;

overscroll-behavior-y: contain; /* Empêche le "pull-to-refresh" sur mobile pendant le drag */

}

.a4-paper {

border: 2px solid #000;

display: grid;

grid-template-columns: repeat(2, 1fr);

grid-template-rows: repeat(2, 1fr);

cursor: pointer;

background-color: #f0f0f0;

}

.quadrant {

border: 1px dashed #666;

display: flex;

justify-content: center;

align-items: center;

transition: background-color 0.2s ease-in-out;

}

.quadrant:hover {

background-color: #e0e0e0;

}

.quadrant.selected {

background-color: #ffffff !important;

border: 2px solid #3b82f6;

}

#message-box {

position: fixed;

top: 20px;

left: 50%;

transform: translateX(-50%);

padding: 10px 20px;

border-radius: 8px;

color: white;

z-index: 1000;

display: none;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}

#message-box.success { background-color: #28a745; }

#message-box.error { background-color: #dc3545; }

#message-box.info { background-color: #17a2b8; }

.quadrant-icon { font-size: 10px; color: #888; }

.portrait { width: 100px; height: 141.4px; }

.landscape { width: 141.4px; height: 100px; }

#imageCanvas {

touch-action: none; /* Important pour la gestion tactile personnalisée */

}

.handle {

position: absolute;

width: 12px; /* Légèrement plus grand pour le tactile */

height: 12px;

background-color: rgba(255, 0, 0, 0.7);

border: 1px solid rgba(255, 255, 255, 0.9);

border-radius: 50%;

z-index: 10;

touch-action: none; /* Empêche le défilement lors de l'interaction avec les poignées */

}

</style>

</head>

<h1 class="text-2xl md:text-3xl font-bold text-gray-800">Suppresseur de Publicités pour Bordereaux</h1>

<p class="text-gray-600 mt-2">Masquez les publicités sur vos bordereaux Vinted et autres.</p>

</header>

<main>

<h2 class="text-xl font-semibold text-gray-700 mb-3 text-center">1. Choisissez la zone initiale approximative :</h2>

<div>

<p class="text-center text-sm font-medium text-gray-600 mb-1">Portrait</p>

</div>

<div>

<p class="text-center text-sm font-medium text-gray-600 mb-1">Paysage</p>

</div>

</section>

<h2 class="text-xl font-semibold text-gray-700 mb-3 text-center">2. Téléversez votre bordereau (Image ou PDF) :</h2>

<input type="file" id="imageUpload" accept="image/*,application/pdf" class="block w-full max-w-xs text-sm text-gray-500

file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold

file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100

mb-4 p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">

</div>

</section>

<h2 class="text-xl font-semibold text-gray-700 mb-3">3. Ajustez la zone et validez :</h2>

Afficher et Ajuster la Zone

</button>

</div>

Masquer la Pub et Télécharger

</button>

</section>

</main>

</div>

// Références DOM

const allQuadrants = document.querySelectorAll('.quadrant');

const imageUpload = document.getElementById('imageUpload');

const initiateProcessingButton = document.getElementById('initiateProcessingButton');

const imageCanvas = document.getElementById('imageCanvas');

const canvasContainer = document.getElementById('canvasContainer');

const applyAndDownloadButton = document.getElementById('applyAndDownloadButton');

const messageBox = document.getElementById('message-box');

const ctx = imageCanvas.getContext('2d');

// État global

let selectedQuadrantInfo = { orientation: null, quadrantIndex: null };

let uploadedImage = null;

let pdfDoc = null;

let currentSelectionRect = { x: 0, y: 0, w: 0, h: 0, isDefined: false };

let activeDragAction = null;

let dragStartCoords = { x: 0, y: 0 };

let rectStartCoords = { x: 0, y: 0, w: 0, h: 0 };

const HANDLE_SIZE = 12; // Augmenté pour le tactile

let handles = [];

// --- Fonctions Utilitaires ---

function showMessage(text, type = 'info', duration = 4000) {

messageBox.textContent = text;

messageBox.className = '';

messageBox.classList.add(type);

messageBox.style.display = 'block';

setTimeout(() => { messageBox.style.display = 'none'; }, duration);

}

function checkInitiateButtonState() {

initiateProcessingButton.disabled = !(uploadedImage && selectedQuadrantInfo.quadrantIndex !== null);

}

// --- Gestion des Événements ---

allQuadrants.forEach(quadrant => {

quadrant.addEventListener('click', () => {

allQuadrants.forEach(q => q.classList.remove('selected'));

quadrant.classList.add('selected');

selectedQuadrantInfo.orientation = quadrant.dataset.orientation;

selectedQuadrantInfo.quadrantIndex = parseInt(quadrant.dataset.quadrant);

checkInitiateButtonState();

showMessage(`Zone initiale: ${selectedQuadrantInfo.orientation}, Q${selectedQuadrantInfo.quadrantIndex + 1}. Téléversez un fichier.`, 'info');

});

imageUpload.addEventListener('change', (event) => {

const file = event.target.files[0];

if (!file) return;

resetCanvasAndState();

if (file.type.startsWith('image/')) {

const reader = new FileReader();

reader.onload = (e) => {

uploadedImage = new Image();

uploadedImage.onload = () => {

showMessage('Image chargée. Cliquez sur "Afficher et Ajuster".', 'success');

checkInitiateButtonState();

};

uploadedImage.onerror = () => {

showMessage('Erreur de chargement image.', 'error'); uploadedImage = null;

}

uploadedImage.src = e.target.result;

};

reader.readAsDataURL(file);

} else if (file.type === 'application/pdf') {

const fileReader = new FileReader();

fileReader.onload = function() {

const typedarray = new Uint8Array(this.result);

pdfjsLib.getDocument(typedarray).promise.then(pdfDoc_ => {

pdfDoc = pdfDoc_;

renderPdfPage(1);

}).catch(err => {

showMessage('Erreur chargement PDF: ' + (err.message || err), 'error'); uploadedImage = null;

checkInitiateButtonState();

});

};

fileReader.readAsArrayBuffer(file);

} else {

showMessage('Type de fichier non supporté (Image/PDF).', 'error');

uploadedImage = null; imageUpload.value = '';

}

checkInitiateButtonState();

});

function renderPdfPage(pageNum) {

if (!pdfDoc) return;

pdfDoc.getPage(pageNum).then(page => {

const viewport = page.getViewport({ scale: 2.5 });

const tempCanvas = document.createElement('canvas');

const tempCtx = tempCanvas.getContext('2d');

tempCanvas.height = viewport.height;

tempCanvas.width = viewport.width;

page.render({ canvasContext: tempCtx, viewport: viewport }).promise.then(() => {

uploadedImage = new Image();

uploadedImage.onload = () => {

showMessage('Page PDF chargée. Cliquez sur "Afficher et Ajuster".', 'success');

checkInitiateButtonState();

};

uploadedImage.onerror = () => {

showMessage('Erreur conversion PDF.', 'error'); uploadedImage = null;

}

uploadedImage.src = tempCanvas.toDataURL('image/png');

});

}).catch(err => {

showMessage('Erreur rendu PDF: ' + (err.message || err), 'error'); uploadedImage = null;

checkInitiateButtonState();

});

}

initiateProcessingButton.addEventListener('click', () => {

if (!uploadedImage || selectedQuadrantInfo.quadrantIndex === null) {

showMessage('Sélectionnez zone ET téléversez un fichier.', 'error');

return;

}

setupInteractiveStage();

initiateProcessingButton.classList.add('hidden');

applyAndDownloadButton.classList.remove('hidden');

imageCanvas.style.display = 'block';

showMessage('Ajustez le rectangle, puis validez.', 'info');

});

function setupInteractiveStage() {

imageCanvas.width = uploadedImage.width;

imageCanvas.height = uploadedImage.height;

const imgW = uploadedImage.width;

const imgH = uploadedImage.height;

currentSelectionRect.w = imgW / 2;

currentSelectionRect.h = imgH / 2;

switch (selectedQuadrantInfo.quadrantIndex) {

case 0: currentSelectionRect.x = 0; currentSelectionRect.y = 0; break;

case 1: currentSelectionRect.x = imgW / 2; currentSelectionRect.y = 0; break;

case 2: currentSelectionRect.x = 0; currentSelectionRect.y = imgH / 2; break;

case 3: currentSelectionRect.x = imgW / 2; currentSelectionRect.y = imgH / 2; break;

}

currentSelectionRect.isDefined = true;

createHandles();

drawCanvasWithSelectionAndHandles();

}

function drawCanvasWithSelectionAndHandles(isFinal = false) {

if (!uploadedImage) return;

ctx.clearRect(0, 0, imageCanvas.width, imageCanvas.height);

ctx.drawImage(uploadedImage, 0, 0);

if (currentSelectionRect.isDefined) {

if (isFinal) {

ctx.fillStyle = 'white';

ctx.fillRect(currentSelectionRect.x, currentSelectionRect.y, currentSelectionRect.w, currentSelectionRect.h);

removeHandles();

} else {

ctx.strokeStyle = 'rgba(255, 0, 0, 0.8)';

ctx.lineWidth = 2;

ctx.strokeRect(currentSelectionRect.x, currentSelectionRect.y, currentSelectionRect.w, currentSelectionRect.h);

updateHandlesPositions();

}

function createHandles() {

removeHandles();

const handleTypes = ['tl', 't', 'tr', 'l', 'r', 'bl', 'b', 'br'];

handleTypes.forEach(type => {

const handle = document.createElement('div');

handle.classList.add('handle');

handle.dataset.type = type;

canvasContainer.appendChild(handle);

handles.push(handle);

});

updateHandlesPositions();

}

function removeHandles() {

handles.forEach(h => h.remove());

handles = [];

}

function updateHandlesPositions() {

if (!currentSelectionRect.isDefined || handles.length === 0 || !imageCanvas.offsetParent) return; // Vérif que canvas est visible