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 機能

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 中国語 Web サイトの他の関連記事を参照してください。