Easy Image Editor: Tutorial und Dokumentation

Easy Image Editor: Tutorial und Dokumentation

100daysofMiva Tag 5.

Heute habe ich die Implementierung und Funktionalität eines einfachen, aber leistungsstarken Bildeditors besprochen, der mit HTML, CSS und JavaScript erstellt wurde. Mit dem Editor können Benutzer grundlegende Filter anwenden, ein Bild drehen und spiegeln. Es unterstützt auch das Laden eines Bildes vom Gerät des Benutzers und das Speichern des bearbeiteten Bildes.

---

1. HTML-Struktur

Die HTML-Struktur ist in mehrere wichtige Abschnitte unterteilt: die Filteroptionen, Rotations- und Spiegeloptionen, einen Bildvorschaubereich und Steuerschaltflächen.

<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="Easy Image Editor: Tutorial und Dokumentation">
            <img src="image-placeholder.svg" alt="Easy Image Editor: Tutorial und Dokumentation">
        </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>

• Container & Wrapper: Umhüllt den gesamten Bildeditor.
• Filterbereich: Enthält Schaltflächen zum Auswählen von Filtern wie Helligkeit, Sättigung, Inversion und Graustufen.
• Abschnitt drehen und spiegeln: Bietet Optionen zum Drehen und Spiegeln des Bildes.
• Vorschaubildbereich: Zeigt das Bild an, das der Benutzer bearbeitet.
• Steuerbereich: Enthält Schaltflächen zum Zurücksetzen von Filtern, zum Auswählen eines Bilds und zum Speichern des bearbeiteten Bilds.

2. JavaScript-Funktionalität

Der JavaScript-Code verwaltet die Logik hinter dem Laden eines Bildes, dem Anwenden von Filtern, dem Drehen und Spiegeln des Bildes und dem Speichern des bearbeiteten Bildes.

Variablen und DOM-Elemente

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(".Easy Image Editor: Tutorial und Dokumentation 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;

• Variablen: Speichert Standardwerte für Filter und Rotations-/Spiegelzustände.
• DOM-Elemente: Wählt verschiedene Elemente im DOM zur Interaktion aus (z. B. Schaltflächen, Schieberegler, Bildvorschau).

Laden des Bildes

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: Lädt das ausgewählte Bild vom Gerät des Benutzers und zeigt es im Vorschaubereich an.

Anwenden von Filtern

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

• applyFilter: Wendet die ausgewählten Filter und Transformationen (drehen, spiegeln) auf die Bildvorschau an.

Umgang mit Filterauswahl und -aktualisierungen

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();
}

• Ereignis-Listener: Diese sind an die Filterschaltflächen und den Schieberegler angehängt. Sie aktualisieren die Filterwerte und wenden sie erneut auf die Bildvorschau an.

Drehen und Spiegeln des Bildes

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: Diese Schaltflächen drehen das Bild um 90 Grad oder spiegeln es horizontal/vertikal.

Filter zurücksetzen

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

• resetFilter: Setzt alle Filter und Transformationen auf ihre Standardwerte zurück.

Speichern des bearbeiteten Bildes

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: Erstellt ein Canvas-Element, wendet die Transformationen und Filter an und speichert dann das bearbeitete Bild als Datei.

Ereignis-Listener

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

• Ereignis-Listener: Verarbeiten Benutzerinteraktionen, z. B. das Auswählen eines Bildes, das Anpassen von Filtern und das Speichern des bearbeiteten Bildes.

---

3. Verwendung

1. Bild auswählen: Klicken Sie auf die Schaltfläche „Bild auswählen“, um ein Bild von Ihrem Gerät zu laden.
2. Filter anwenden: Wählen Sie einen Filter aus und passen Sie seinen Wert mit
an

der Schieberegler.

1. Drehen und spiegeln: Verwenden Sie die Schaltflächen zum Drehen und Spiegeln, um die Bildausrichtung zu ändern.
2. Filter zurücksetzen: Klicken Sie auf „Filter zurücksetzen“, um alle Einstellungen auf die Standardeinstellungen zurückzusetzen.
3. Bild speichern: Wenn Sie mit den Änderungen zufrieden sind, klicken Sie auf „Bild speichern“, um das geänderte Bild herunterzuladen.

4. Fazit

Dieser einfache Bildeditor bietet wichtige Werkzeuge zum Ändern und Verbessern von Bildern. Die Struktur ist leicht verständlich und erweiterbar gestaltet und ermöglicht das Hinzufügen weiterer Funktionen wie zusätzlicher Filter oder erweiterter Bearbeitungswerkzeuge. Danke fürs Lesen. Auf zum nächsten…

Schau es dir hier an
https://app.marvelly.com.ng/100daysofMiva/day-5/

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

Das obige ist der detaillierte Inhalt vonEasy Image Editor: Tutorial und Dokumentation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!