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. 使用方法
-
画像を選択: [画像を選択] ボタンをクリックして、デバイスから画像を読み込みます。
-
フィルターを適用: フィルターを選択し、
を使用してその値を調整します。
スライダー
-
回転と反転: 回転ボタンと反転ボタンを使用して画像の向きを変更します。
-
フィルターのリセット: [フィルターのリセット] をクリックして、すべての設定をデフォルトに戻します。
-
画像を保存: 編集に満足したら、[画像を保存] をクリックして、変更した画像をダウンロードします。
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
