Editor Imej Mudah: Tutorial dan Dokumentasi

Editor Imej Mudah: Tutorial dan Dokumentasi

100 hariMiva Hari ke-5.

Hari ini, saya telah melalui pelaksanaan dan kefungsian editor imej yang ringkas namun berkuasa yang dibina dengan HTML, CSS dan JavaScript. Editor membenarkan pengguna menggunakan penapis asas, memutar dan membalikkan imej. Ia juga menyokong memuatkan imej daripada peranti pengguna dan menyimpan imej yang diedit.

---

1. Struktur HTML

Struktur HTML dibahagikan kepada beberapa bahagian utama: pilihan penapis, pilihan putaran dan flip, kawasan pratonton imej dan butang kawalan.

<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="Editor Imej Mudah: Tutorial dan Dokumentasi">
            <img src="image-placeholder.svg" alt="Editor Imej Mudah: Tutorial dan Dokumentasi">
        </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>

• Bekas & Pembungkus: Membungkus keseluruhan editor imej.
• Bahagian Penapis: Termasuk butang untuk memilih penapis seperti kecerahan, ketepuan, penyongsangan dan skala kelabu.
• Bahagian Putar & Balikkan: Menyediakan pilihan untuk memutar dan membalikkan imej.
• Pratonton Bahagian Imej: Memaparkan imej yang sedang diedit oleh pengguna.
• Bahagian Kawalan: Mengandungi butang untuk menetapkan semula penapis, memilih imej dan menyimpan imej yang diedit.

2. Fungsi JavaScript

Kod JavaScript mengendalikan logik di sebalik memuatkan imej, menggunakan penapis, memutar dan membalikkan imej dan menyimpan imej yang diedit.

Pembolehubah dan Elemen 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(".Editor Imej Mudah: Tutorial dan Dokumentasi 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;

• Pembolehubah: Menyimpan nilai lalai untuk penapis dan keadaan putaran/balikkan.
• Elemen DOM: Memilih pelbagai elemen dalam DOM untuk interaksi (cth., butang, peluncur, pratonton imej).

Memuatkan Imej

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: Memuatkan imej yang dipilih daripada peranti pengguna dan memaparkannya dalam kawasan pratonton.

Menggunakan Penapis

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

• applyFilter: Gunakan penapis dan transformasi yang dipilih (putar, balik) pada pratonton imej.

Mengendalikan Pemilihan dan Kemas Kini Penapis

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

• Pendengar Acara: Ini dilampirkan pada butang penapis dan peluncur. Mereka mengemas kini nilai penapis dan menggunakannya semula pada pratonton imej.

Memutar dan Membalikkan Imej

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: Butang ini memutarkan imej sebanyak 90 darjah atau membalikkannya secara mendatar/menegak.

Menetapkan Semula Penapis

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

• penapis semula: Menetapkan semula semua penapis dan transformasi kepada nilai lalainya.

Menyimpan Imej yang Diedit

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: Mencipta elemen kanvas, menggunakan transformasi dan penapis, dan kemudian menyimpan imej yang diedit sebagai fail.

Pendengar Acara

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

• Pendengar Acara: Kendalikan interaksi pengguna, seperti memilih imej, melaraskan penapis dan menyimpan imej yang diedit.

---

3. Penggunaan

1. Pilih Imej: Klik butang "Pilih Imej" untuk memuatkan imej daripada peranti anda.
2. Gunakan Penapis: Pilih penapis dan laraskan nilainya menggunakan

gelangsar.

1. Putar & Balik: Gunakan butang putar dan balik untuk mengubah suai orientasi imej.
2. Tetapkan Semula Penapis: Klik "Tetapkan Semula Penapis" untuk mengembalikan semua tetapan kepada lalai.
3. Simpan Imej: Setelah anda berpuas hati dengan pengeditan, klik "Simpan Imej" untuk memuat turun imej yang diubah suai.

4. Kesimpulan

Editor imej ringkas ini menyediakan alatan penting untuk mengubah suai dan meningkatkan imej. Struktur ini direka bentuk agar mudah difahami dan boleh dilanjutkan, membolehkan penambahan lebih banyak ciri seperti penapis tambahan atau alat penyuntingan lanjutan. Terima kasih kerana membaca. Ke seterusnya…

Lihat di sini
https://app.marvelly.com.ng/100daysofMiva/day-5/

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

Atas ialah kandungan terperinci Editor Imej Mudah: Tutorial dan Dokumentasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!