🎨 Image Editor

Un éditeur d'images moderne et extensible basé sur HTML5 Canvas

Démo en direct • Documentation • Contribuer

---

✨ Aperçu

Image Editor est un éditeur d'images web moderne et intuitif développé en JavaScript vanilla. Conçu avec une architecture modulaire basée sur des plugins, il offre une expérience utilisateur fluide et des fonctionnalités d'édition avancées directement dans le navigateur.

🎯 Points forts

• 🚀 Performance optimisée - Rendu basé sur HTML5 Canvas
• 🔧 Architecture modulaire - Système de plugins extensible
• ⚡ Interface réactive - Design moderne et intuitif
• 🎨 Outils complets - Rotation, recadrage, filtres, dessin, formes et texte
• ⏮️ Historique complet - Undo/Redo avec raccourcis clavier
• 💾 Sauvegarde simple - Export direct en PNG

---

🚀 Fonctionnalités

🖼️ Gestion d'images

• Import - Chargement d'images depuis l'ordinateur
• Export - Sauvegarde en format PNG haute qualité
• Historique - Système undo/redo avec 20 niveaux

🔄 Transformations

• Rotation - Rotation 90° droite/gauche
• Recadrage - Sélection et découpe précise
• Redimensionnement - Ajustement des dimensions

🎨 Outils de dessin

• Pinceau - Dessin libre avec options avancées
  • Couleurs personnalisables
  • Taille variable (1-50px)
  • Types de brosse (rond/carré)
  • Contrôle d'opacité
• Formes - Rectangles, cercles, lignes
• Texte - Ajout de texte avec formatage

🌈 Filtres et effets

• Luminosité - Ajustement -100 à +100
• Contraste - Contrôle précis du contraste
• Saturation - Modification de l'intensité des couleurs
• Teinte - Rotation des couleurs (-180° à +180°)
• Flou - Effet de flou gaussien (0-10px)

---

🛠️ Installation

Prérequis

• Navigateur web moderne (Chrome, Firefox, Safari, Edge)
• Serveur web local (optionnel pour développement)

Installation rapide

1. Cloner le repository

git clone https://github.com/pascal1132/image-editor.git
cd image-editor

2. Lancer l'application

# Option 1: Serveur local simple
python -m http.server 8000

# Option 2: Node.js
npx serve .

# Option 3: Live Server (VS Code)
# Installer l'extension Live Server et clic droit sur index.html

3. Ouvrir dans le navigateur

http://localhost:8000

---

📖 Utilisation

Raccourcis clavier

Raccourci	Action
Ctrl + Z	Annuler (Undo)
Ctrl + Shift + Z	Rétablir (Redo)
Ctrl + Y	Rétablir (Redo)
Ctrl + S	Sauvegarder
Escape	Fermer le panneau plugin
1-9	Sélectionner plugin (raccourci numérique)

Workflow typique

1. Charger une image - Cliquer sur "Charger" et sélectionner un fichier
2. Appliquer des transformations - Utiliser les outils de rotation/recadrage
3. Ajouter des effets - Ajuster les filtres selon vos besoins
4. Dessiner ou annoter - Utiliser le pinceau ou ajouter du texte
5. Sauvegarder - Exporter le résultat final

---

⚙️ Architecture technique

Structure des fichiers

image-editor/
├── index.html              # Point d'entrée principal
├── main.js                 # Core de l'éditeur + classe BasePlugin
├── style.css              # Styles de l'interface
├── plugins/               # Plugins modulaires
│   ├── rotate.js          # Plugin de rotation
│   ├── crop.js           # Plugin de recadrage
│   ├── brush.js          # Plugin de dessin
│   ├── text.js           # Plugin de texte
│   ├── filters.js        # Plugin de filtres
│   └── shapes.js         # Plugin de formes
└── README.md             # Documentation

Système de plugins

Chaque plugin hérite de la classe BasePlugin et implémente :

class MonPlugin extends BasePlugin {
    get name() { return 'Mon Plugin'; }
    get icon() { return 'fa-icon-class'; }
    
    getUI() {
        // Retourne les contrôles de l'interface
        return [
            { type: 'button', label: 'Action', action: () => this.action() }
        ];
    }
    
    // Méthodes optionnelles
    onMouseDown(x, y) { /* Gestion souris */ }
    onMouseMove(x, y, isDown) { /* Gestion mouvement */ }
    onMouseUp(x, y) { /* Fin d'interaction */ }
    prepareForSaving() { /* Préparation sauvegarde */ }
}

Types de contrôles UI supportés

• button - Boutons d'action
• range - Sliders de valeurs
• color - Sélecteurs de couleur
• text - Champs de texte
• number - Champs numériques
• select - Listes déroulantes
• checkbox - Cases à cocher

---

🔧 Développement

Créer un nouveau plugin

1. Créer le fichier plugin

// plugins/mon-plugin.js
class MonPlugin extends BasePlugin {
    get name() { return 'Mon Plugin'; }
    get icon() { return 'fa-solid fa-star'; }
    
    getUI() {
        return [
            {
                type: 'button',
                label: 'Mon Action',
                action: () => this.monAction()
            }
        ];
    }
    
    monAction() {
        // Logique du plugin
        this.editor.saveToHistory(); // Sauvegarder l'état
    }
}

2. Ajouter le script dans index.html

<script src="plugins/mon-plugin.js"></script>

3. Enregistrer le plugin

new ImageEditor('#container', {
    plugins: [RotatePlugin, CropPlugin, /* ... */, MonPlugin]
});

Conventions de développement

• Utiliser this.editor.saveToHistory() avant les modifications
• Implémenter prepareForSaving() si nécessaire
• Gérer les événements souris pour l'interactivité
• Suivre les conventions de nommage des classes

---

🤝 Contribuer

Les contributions sont les bienvenues ! Voici comment participer :

Processus de contribution

1. Fork le projet
2. Créer une branche feature (git checkout -b feature/nouvelle-fonctionnalite)
3. Commiter les changements (git commit -m 'Ajout nouvelle fonctionnalité')
4. Push vers la branche (git push origin feature/nouvelle-fonctionnalite)
5. Ouvrir une Pull Request

Types de contributions recherchées

• 🐛 Bug fixes - Correction de bugs
• ✨ Nouvelles fonctionnalités - Nouveaux plugins ou outils
• 📚 Documentation - Amélioration de la documentation
• 🎨 UI/UX - Améliorations de l'interface
• ⚡ Performance - Optimisations

Idées de plugins

• Plugin de forme libre (courbes de Bézier)
• Plugin de dégradés
• Plugin d'effets avancés (ombre, relief)
• Plugin de calques
• Plugin d'export multi-format

---

📄 License

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.

---

🙏 Remerciements

• Font Awesome - Icônes de l'interface
• Google Fonts - Police Inter
• HTML5 Canvas API - Rendu graphique
• Communauté open source - Inspiration et support

---

Développé avec ❤️ par [Pascal]

⭐ Star ce projet • 🐛 Reporter un bug • 💡 Suggérer une fonctionnalité