6.2 KiB
6.2 KiB
Design — Convertisseur Images Shopify
Date : 2026-05-27
Statut : Approuvé
Projet : Matériaux Destock — Outil de conversion et détourage photos produits
Contexte
Les photos de produits sont prises en entrepôt sur fond blanc. Elles sont au format HEIC (iPhone) et doivent être converties en JPG avec un fond blanc pur et uniforme avant d'être uploadées sur Shopify. Les fichiers sont nommés selon le numéro de produit (ex: 12345.heic).
Objectif
Une application web client-side (aucun serveur requis) permettant de :
- Importer des fichiers HEIC (10–50 à la fois)
- Les convertir en JPG
- Supprimer/uniformiser le fond blanc automatiquement
- Permettre une sélection manuelle de fond par pipette pour les cas complexes (pots de peinture)
- Prévisualiser le résultat avant/après pour chaque image
- Télécharger toutes les images traitées en ZIP
Interface utilisateur
Layout — Page unique, 3 zones
Zone 1 — Upload
- Zone de drag & drop acceptant les fichiers
.heic - Bouton "Parcourir" en fallback
- Indicateur du nombre de fichiers sélectionnés
- Curseur de tolérance global (valeur par défaut : 30, plage : 10–80)
Zone 2 — Grille de traitement
- Une carte par image avec :
- Miniature "Avant" (original converti en JPG)
- Miniature "Après" (fond supprimé)
- Nom du fichier (numéro de produit)
- Statut : ⏳ En cours / ✅ OK / ⚠️ À vérifier
- Bouton 🎨 Pipette — pour sélectionner manuellement la couleur de fond
- Curseur de tolérance individuel (hérite du global, ajustable par image)
- Bouton 🔄 Retraiter — relance l'algorithme avec les nouveaux paramètres
Zone 3 — Export
- Bouton "⬇️ Télécharger tout en ZIP" (actif dès qu'au moins une image est traitée)
- Compteur : "X/Y images prêtes"
Flux utilisateur
- L'utilisateur dépose ses fichiers HEIC
- Chaque fichier est converti en JPG (en mémoire)
- L'algorithme de suppression de fond tourne automatiquement sur chaque image
- L'utilisateur inspecte les avant/après dans la grille
- Sur les images insatisfaisantes : clic sur 🎨 Pipette → clic sur le fond dans l'original → retraitement automatique
- Clic sur "Télécharger tout en ZIP" → fichiers
.jpgavec nommage d'origine
Algorithme de suppression de fond
Suppression automatique (fond blanc)
- Flood-fill depuis les 4 coins de l'image (pixels [0,0], [w-1,0], [0,h-1], [w-1,h-1])
- Critère d'appartenance au fond : distance de Chebyshev entre le pixel courant et la couleur de départ ≤ tolérance — soit
max(|R1-R2|, |G1-G2|, |B1-B2|) ≤ tolérance - Propagation en 4-connexité (haut, bas, gauche, droite)
- Remplacement des pixels identifiés comme fond par blanc pur (R:255, G:255, B:255)
- Anti-aliasing : léger fondu gaussien sur les pixels de bordure (1–2px) pour éviter les contours crénelés
Sélection manuelle par pipette
- L'utilisateur clique sur le bouton 🎨 d'une image
- Chrome/Edge : utilisation de l'API
window.EyeDropper— le curseur devient une pipette, l'utilisateur clique n'importe où sur l'image originale - Safari/Firefox (fallback) : clic direct sur le canvas de l'image originale — la couleur du pixel cliqué est capturée
- La couleur sélectionnée remplace le point de départ du flood-fill
- Le retraitement est lancé automatiquement
Paramètre de tolérance
- Plage : 10 (strict, pour fonds très homogènes) à 80 (permissif, pour fonds légèrement texturés)
- Valeur par défaut : 30 (adapté aux photos d'entrepôt sur fond blanc)
- Configurable globalement et par image
Stack technique
| Rôle | Technologie |
|---|---|
| Conversion HEIC → JPG | heic2any (CDN) |
| Manipulation d'image | Canvas API natif (navigateur) |
| Interface réactive | Alpine.js (CDN, ~15kb) |
| Style | Tailwind CSS (CDN) |
| Export ZIP | JSZip (CDN) |
| Pipette couleur | EyeDropper API + fallback canvas |
Aucune dépendance serveur. L'application tourne entièrement dans le navigateur. Les images ne quittent jamais la machine de l'utilisateur.
Concurrence de traitement : les images sont traitées 3 par 3 simultanément (via Promise.all par lots) pour éviter de bloquer le fil principal du navigateur tout en maximisant la vitesse sur un lot de 50 fichiers.
Structure des fichiers
convertisseur-images/
├── index.html ← Application complète (point d'entrée unique)
├── js/
│ ├── heicConverter.js ← Conversion HEIC → JPG via heic2any
│ ├── bgRemover.js ← Flood-fill, pipette, anti-aliasing
│ ├── imageProcessor.js ← Orchestration du pipeline de traitement
│ └── zipExporter.js ← Packaging ZIP via JSZip
└── css/
└── app.css ← Styles complémentaires à Tailwind
Nommage des fichiers de sortie
- Le nom d'origine est conservé intégralement
- Seule l'extension change :
.heic→.jpg - Exemples :
12345.heic→12345.jpg,REF-ABC.heic→REF-ABC.jpg
Qualité de sortie
- Format : JPEG
- Qualité : 92% (équilibre optimal taille/qualité pour Shopify)
- Dimensions : conservées à l'identique (pas de redimensionnement)
Compatibilité navigateurs
| Navigateur | Support | Notes |
|---|---|---|
| Chrome 95+ | ✅ Complet | EyeDropper API disponible |
| Edge 95+ | ✅ Complet | EyeDropper API disponible |
| Safari | ⚠️ Partiel | Fallback canvas pour la pipette |
| Firefox | ⚠️ Partiel | Fallback canvas pour la pipette |
Recommandation utilisateur : utiliser Chrome ou Edge pour l'expérience complète.
Gestion des erreurs
- Fichier non-HEIC : ignoré avec message "Format non supporté"
- Image trop grande (> 50MB) : avertissement, traitement quand même tenté
- Flood-fill sans résultat : l'image est marquée ⚠️ avec suggestion d'utiliser la pipette
- Erreur heic2any : carte marquée ❌ avec message d'erreur lisible
Hors périmètre (YAGNI)
- Redimensionnement des images
- Upload direct vers Shopify
- Historique des sessions
- Compte utilisateur / sauvegarde cloud
- Traitement par IA (remove.bg, etc.)