简易图像编辑器：教程和文档

简易图像编辑器：教程和文档

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. 应用过滤器：选择一个过滤器并使用
调整其值

滑块。

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中文网其他相关文章！