Éditeur d'images facile : tutoriel et documentation

Éditeur d'images facile : tutoriel et documentation

100 jours de Miva Jour 5.

Aujourd'hui, j'ai découvert l'implémentation et les fonctionnalités d'un éditeur d'images simple mais puissant construit avec HTML, CSS et JavaScript. L'éditeur permet aux utilisateurs d'appliquer des filtres de base, de faire pivoter et de retourner une image. Il prend également en charge le chargement d'une image à partir de l'appareil de l'utilisateur et l'enregistrement de l'image modifiée.

1.Structure HTML

La structure HTML est divisée en plusieurs sections clés : les options de filtre, les options de rotation et de retournement, une zone d'aperçu de l'image et les boutons de contrôle.

 
Easy Image Editor
 
 
  
 Filters 
 Brightness Saturation Inversion Grayscale 
  
 
 
Brighteness
 
100%
 
  
 
  
 Rotate & Flip 
     
 
 
  
  
 
  
 Reset Filters 
  Choose Image Save Image 
 
 

• Container & Wrapper: enveloppe l'intégralité de l'éditeur d'images.
• Section Filtre: comprend des boutons pour sélectionner des filtres tels que la luminosité, la saturation, l'inversion et les niveaux de gris.
• Section Rotation et retournement: fournit des options pour faire pivoter et retourner l'image.
• Section d'aperçu de l'image: affiche l'image que l'utilisateur est en train de modifier.
• Section Contrôles: contient des boutons pour réinitialiser les filtres, choisir une image et enregistrer l'image modifiée.

2.Fonctionnalité JavaScript

Le code JavaScript gère la logique derrière le chargement d'une image, l'application de filtres, la rotation et le retournement de l'image et l'enregistrement de l'image modifiée.

Variables et éléments DOM

const fileInput = document.querySelector(".file-input"), filterOptions = document.querySelectorAll(".filter button"), filterName = document.querySelector(".filter-info .name"), filterValue = document.querySelector(".filter-info .value"), filterSlider = document.querySelector(".slider input"), rotateOptions = document.querySelectorAll(".rotate button"), previewImg = document.querySelector(".Éditeur dimages facile : tutoriel et documentation img"), resetFilterBtn = document.querySelector(".reset-filter"), chooseImgBtn = document.querySelector(".choose-img"), saveImgBtn = document.querySelector(".save-img"); let brightness = "100", saturation = "100", inversion = "0", grayscale = "0"; let rotate = 0, flipHorizontal = 1, flipVertical = 1;

• Variables: stocke les valeurs par défaut pour les filtres et les états de rotation/retournement.
• Éléments DOM: sélectionne divers éléments dans le DOM pour l'interaction (par exemple, boutons, curseurs, aperçu de l'image).

Chargement de l'image

const loadImage = () => { let file = fileInput.files[0]; if(!file) return; previewImg.src = URL.createObjectURL(file); previewImg.addEventListener("load", () => { resetFilterBtn.click(); // Reset filters when a new image is loaded document.querySelector(".container").classList.remove("disable"); }); }

• loadImage: charge l'image sélectionnée à partir de l'appareil de l'utilisateur et l'affiche dans la zone d'aperçu.

Application de filtres

const applyFilter = () => { previewImg.style.transform = `rotate(${rotate}deg) scale(${flipHorizontal}, ${flipVertical})`; previewImg.style.filter = `brightness(${brightness}%) saturate(${saturation}%) invert(${inversion}%) grayscale(${grayscale}%)`; }

• applyFilter: applique les filtres et transformations sélectionnés (rotation, retournement) à l'aperçu de l'image.

Gestion de la sélection des filtres et des mises à jour

filterOptions.forEach(option => { option.addEventListener("click", () => { document.querySelector(".active").classList.remove("active"); option.classList.add("active"); filterName.innerText = option.innerText; if(option.id === "brightness") { filterSlider.max = "200"; filterSlider.value = brightness; filterValue.innerText = `${brightness}%`; } else if(option.id === "saturation") { filterSlider.max = "200"; filterSlider.value = saturation; filterValue.innerText = `${saturation}%` } else if(option.id === "inversion") { filterSlider.max = "100"; filterSlider.value = inversion; filterValue.innerText = `${inversion}%`; } else { filterSlider.max = "100"; filterSlider.value = grayscale; filterValue.innerText = `${grayscale}%`; } }); }); const updateFilter = () => { filterValue.innerText = `${filterSlider.value}%`; const selectedFilter = document.querySelector(".filter .active"); if(selectedFilter.id === "brightness") { brightness = filterSlider.value; } else if(selectedFilter.id === "saturation") { saturation = filterSlider.value; } else if(selectedFilter.id === "inversion") { inversion = filterSlider.value; } else { grayscale = filterSlider.value; } applyFilter(); }

• Écouteurs d'événements: ceux-ci sont attachés aux boutons de filtre et au curseur. Ils mettent à jour les valeurs du filtre et les réappliquent à l'aperçu de l'image.

Rotation et retournement de l'image

rotateOptions.forEach(option => { option.addEventListener("click", () => { if(option.id === "left") { rotate -= 90; } else if(option.id === "right") { rotate += 90; } else if(option.id === "horizontal") { flipHorizontal = flipHorizontal === 1 ? -1 : 1; } else { flipVertical = flipVertical === 1 ? -1 : 1; } applyFilter(); }); });

• rotateOptions: Ces boutons font pivoter l'image de 90 degrés ou la retournent horizontalement/verticalement.

Réinitialisation des filtres

const resetFilter = () => { brightness = "100"; saturation = "100"; inversion = "0"; grayscale = "0"; rotate = 0; flipHorizontal = 1; flipVertical = 1; filterOptions[0].click(); applyFilter(); }

• resetFilter: réinitialise tous les filtres et transformations à leurs valeurs par défaut.

Enregistrement de l'image modifiée

const saveImage = () => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = previewImg.naturalWidth; canvas.height = previewImg.naturalHeight; ctx.filter = `brightness(${brightness}%) saturate(${saturation}%) invert(${inversion}%) grayscale(${grayscale}%)`; ctx.translate(canvas.width / 2, canvas.height / 2); if(rotate !== 0) { ctx.rotate(rotate * Math.PI / 180); } ctx.scale(flipHorizontal, flipVertical); ctx.drawImage(previewImg, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height); const link = document.createElement("a"); link.download = "image.jpg"; link.href = canvas.toDataURL(); link.click(); }

• saveImage: crée un élément de canevas, applique les transformations et les filtres, puis enregistre l'image modifiée sous forme de fichier.

Écouteurs d'événements

filterSlider.addEventListener("input", updateFilter); resetFilterBtn.addEventListener("click", resetFilter); saveImgBtn.addEventListener("click", saveImage); fileInput.addEventListener("change", loadImage); chooseImgBtn.addEventListener("click", () => fileInput.click());

• Écouteurs d'événements: gérez les interactions des utilisateurs, telles que le choix d'une image, l'ajustement des filtres et l'enregistrement de l'image modifiée.

3.Utilisation

1. Choisissez une image: cliquez sur le bouton "Choisir une image" pour charger une image depuis votre appareil.
2. Appliquer des filtres: sélectionnez un filtre et ajustez sa valeur à l'aide de

le curseur.

1. Rotation et retournement: utilisez les boutons de rotation et de retournement pour modifier l'orientation de l'image.
2. Réinitialiser les filtres: cliquez sur "Réinitialiser les filtres" pour rétablir tous les paramètres par défaut.
3. Enregistrer l'image: Une fois que vous êtes satisfait des modifications, cliquez sur "Enregistrer l'image" pour télécharger l'image modifiée.

4.Conclusion

Cet éditeur d'images simple fournit des outils essentiels pour modifier et améliorer les images. La structure est conçue pour être facile à comprendre et extensible, permettant l'ajout de fonctionnalités supplémentaires telles que des filtres supplémentaires ou des outils d'édition avancés. Merci d'avoir lu. Au prochain…

Découvrez-le ici
https://app.marvelly.com.ng/100daysofMiva/day-5/

Code source
https://github.com/Marvellye/100daysofMiva/tree/main/Projects/Day_5-Image-Editor

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!