首頁 > web前端 > js教程 > 主體

簡易圖像編輯器:教學與文檔

王林
發布: 2024-08-25 06:35:32
原創
794 人瀏覽過

Easy Image Editor: Tutorial and Documentation

簡易圖像編輯器:教學與文檔

Miva 100 天第 5 天。

今天,我體驗了一個使用 HTML、CSS 和 JavaScript 建立的簡單但功能強大的圖像編輯器的實作和功能。此編輯器允許使用者套用基本濾鏡、旋轉和翻轉影像。它還支援從用戶設備加載圖像並保存編輯後的圖像。


1. HTML 結構

HTML 結構分為幾個關鍵部分:濾鏡選項、旋轉和翻轉選項、影像預覽區域和控制按鈕。

<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="簡易圖像編輯器:教學與文檔">
            <img src="image-placeholder.svg" alt="簡易圖像編輯器:教學與文檔">
        </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>

登入後複製
  • 容器和包裝器:包裝整個影像編輯器。
  • 濾鏡部分:包含用於選擇亮度、飽和度、反轉和灰階等濾鏡的按鈕。
  • 旋轉和翻轉部分:提供旋轉和翻轉影像的選項。
  • 預覽影像部分:顯示使用者正在編輯的影像。
  • 控制部分:包含用於重置濾鏡、選擇影像和儲存編輯後的影像的按鈕。

2. JavaScript 功能

JavaScript 程式碼處理載入影像、應用濾鏡、旋轉和翻轉影像以及保存編輯後的影像背後的邏輯。

變數和 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(".簡易圖像編輯器:教學與文檔 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;

登入後複製
  • 變數:儲存過濾器和旋轉/翻轉狀態的預設值。
  • DOM 元素:選擇 DOM 中的各種元素進行互動(例如按鈕、滑桿、影像預覽)。

載入圖片

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:從使用者裝置載入選定的映像並將其顯示在預覽區域中。

應用過濾器

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

登入後複製
  • applyFilter:將選定的濾鏡和變換(旋轉、翻轉)套用至影像預覽。

處理過濾器選擇和更新

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

登入後複製
  • 事件監聽器:它們附加到過濾器按鈕和滑桿。他們更新過濾器值並將其重新應用到圖像預覽。

旋轉和翻轉圖像

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:這些按鈕將影像旋轉 90 度或水平/垂直翻轉。

重置過濾器

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

登入後複製
  • resetFilter:將所有過濾器和轉換重設為其預設值。

儲存編輯後的影像

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:建立畫布元素,套用轉換和濾鏡,然後將編輯後的影像儲存為檔案。

事件監聽器

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

登入後複製
  • 事件監聽器:處理使用者交互,例如選擇影像、調整濾鏡和儲存編輯後的影像。

3. 使用方法

  1. 選擇圖像:點擊「選擇圖像」按鈕從您的裝置載入圖像。
  2. 套用過濾器:選擇一個過濾器並使用
  3. 調整其值

滑桿。

  1. 旋轉和翻轉:使用旋轉和翻轉按鈕修改影像方向。
  2. 重設篩選器:點選「重設篩選器」可將所有設定還原為預設值。
  3. 儲存影像:對編輯滿意後,按一下「儲存影像」下載修改後的影像。

4. 結論

這個簡單的影像編輯器提供了修改和增強影像的基本工具。該結構被設計為易於理解和可擴展,允許添加更多功能,例如附加過濾器或高級編輯工具。感謝您的閱讀。進入下一個…

在這裡查看
https://app.marvelly.com.ng/100daysofMiva/day-5/

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

以上是簡易圖像編輯器:教學與文檔的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板