É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.

<div class="container disable">
    <h2>Easy Image Editor</h2>
    <div class="wrapper">
        <div class="editor-panel">
            <!-- Filters Section -->
            <div class="filter">
                <label class="title">Filters</label>
                <div class="options">
                    <button id="brightness" class="active">Brightness</button>
                    <button id="saturation">Saturation</button>
                    <button id="inversion">Inversion</button>
                    <button id="grayscale">Grayscale</button>
                </div>
                <!-- Slider for Filter Adjustments -->
                <div class="slider">
                    <div class="filter-info">
                        <p class="name">Brighteness</p>
                        <p class="value">100%</p>
                    </div>
                    <input type="range" value="100" min="0" max="200">
                </div>
            </div>
            <!-- Rotate & Flip Section -->
            <div class="rotate">
                <label class="title">Rotate & Flip</label>
                <div class="options">
                    <button id="left"><i class="fa-solid fa-rotate-left"></i></button>
                    <button id="right"><i class="fa-solid fa-rotate-right"></i></button>
                    <button id="horizontal"><i class="bx bx-reflect-vertical"></i></button>
                    <button id="vertical"><i class="bx bx-reflect-horizontal"></i></button>
                </div>
            </div>
        </div>
        <!-- Image Preview Section -->
        <div class="Éditeur dimages facile : tutoriel et documentation">
            <img src="image-placeholder.svg" alt="Éditeur dimages facile : tutoriel et documentation">
        </div>
    </div>
    <!-- Controls Section -->
    <div class="controls">
        <button class="reset-filter">Reset Filters</button>
        <div class="row">
            <input type="file" class="file-input" accept="image/*" hidden>
            <button class="choose-img">Choose Image</button>
            <button class="save-img">Save Image</button>
        </div>
    </div>
</div>

• Conteneur et emballage : 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 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 du 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 de l'utilisateur, 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!