Easy Image Editor: 튜토리얼 및 문서

Easy Image Editor: 튜토리얼 및 문서

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="Easy Image Editor: 튜토리얼 및 문서">
            <img src="image-placeholder.svg" alt="Easy Image Editor: 튜토리얼 및 문서">
        </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 코드는 이미지 로드, 필터 적용, 이미지 회전 및 뒤집기, 편집된 이미지 저장 등의 논리를 처리합니다.

변수 및 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(".Easy Image Editor: 튜토리얼 및 문서 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. 필터 적용: 필터를 선택하고
을 사용하여 값을 조정합니다.

슬라이더.

1. 회전 및 뒤집기: 회전 및 뒤집기 버튼을 사용하여 이미지 방향을 수정합니다.
2. 필터 재설정: 모든 설정을 기본값으로 되돌리려면 "필터 재설정"을 클릭하세요.
3. 이미지 저장: 편집 내용이 만족스러우면 "이미지 저장"을 클릭하여 수정된 이미지를 다운로드하세요.

4. 결론

이 간단한 이미지 편집기는 이미지를 수정하고 향상시키는 데 필수적인 도구를 제공합니다. 구조는 이해하기 쉽고 확장 가능하도록 설계되어 추가 필터나 고급 편집 도구와 같은 더 많은 기능을 추가할 수 있습니다. 읽어주셔서 감사합니다. 다음으로…

여기에서 확인하세요
https://app.marvelly.com.ng/100daysofMiva/day-5/

소스코드
https://github.com/Marvellye/100daysofMiva/tree/main/Projects/Day_5-Image-Editor

위 내용은 Easy Image Editor: 튜토리얼 및 문서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!