Create a Photo Filters and Effects Project using HTML CSS & JavaScript

In this article, we are going to implement a photo editor that allows users to apply various filters and effects to their images. This project will use HTML, CSS, and JavaScript to provide a user-friendly interface for adjusting brightness, contrast, gray scale, blur, sepia, and hue rotation filters. Users can also reset the filters to their default values and save the edited image.

Preview of final output: Let us have a look at how the final output will look like.

Prerequisites

• HTML
• CSS
• JavaScript

Approach

Our approach involves building a user interface with input sliders for each filter and applying these filters in real-time to the displayed image. We’ll also provide options to reset the filters and save the edited image.

• In HTML structure, we create multiple <input type=”range”> for brightness, contrast, grayscale, blur, sepia, hue rotation, and also an input for image input.
• Style the web page using the class names with CSS properties like font weight for text margins, padding to add space, text-align for alignment, and display type for display styling of individual elements.
• Using JavaScript, develop a function that loads an image from an input source. Additionally, create functions that respond to slider changes, capturing their input values. These values are then utilized to dynamically adjust the filter configurations.
  • Filters: Add filter sliders for brightness, contrast, grayscale, blur, sepia, and hue rotation.
  • Real-time Updates: Apply the selected filters to the image in real-time as users adjust the sliders.
  • Reset Functionality: Implement the reset button to revert all filters to their default values.
  • Image Saving: Allow users to save the edited image with applied filters.

Example: Write the following code in respective files

• script.js: This file contains the functionalities of the application
• index.html: This file contains skeleton structure of the application
• style.css: This file implements the styling of the application

Javascript

// Script.js
const imageInput =
    document.getElementById(
        "imageInput"
    );
const previewImage =
    document.getElementById(
        "previewImage"
    );
const brightnessRange =
    document.getElementById(
        "brightness"
    );
const contrastRange =
    document.getElementById("contrast");
const grayscaleRange =
    document.getElementById(
        "grayscale"
    );
const blurRange =
    document.getElementById("blur");
const sepiaRange =
    document.getElementById("sepia");
const hueRange =
    document.getElementById("hue");
const resetButton =
    document.getElementById("reset");
const saveButton =
    document.getElementById("save");

let currentImage = null;

imageInput.addEventListener(
    "change",
    (e) => {
        const file = e.target.files[0];
        if (file) {
            const reader =
                new FileReader();
            reader.onload = (event) => {
                currentImage =
                    new Image();
                currentImage.src =
                    event.target.result;
                currentImage.onload =
                    () => {
                        previewImage.src =
                            currentImage.src;
                        resetFilters();
                    };};
            reader.readAsDataURL(file);
        }
    });

brightnessRange.addEventListener(
    "input",
    () => {
        applyFilters();
    });

contrastRange.addEventListener(
    "input",
    () => {
        applyFilters();
    });

grayscaleRange.addEventListener(
    "input",
    () => {
        applyFilters();
    });

blurRange.addEventListener(
    "input",
    () => {
        applyFilters();
    });

sepiaRange.addEventListener(
    "input",
    () => {
        applyFilters();
    });

hueRange.addEventListener(
    "input",
    () => {
        applyFilters();
    });

resetButton.addEventListener(
    "click",
    () => {
        resetFilters();
    });

saveButton.addEventListener(
    "click",
    () => {
        saveEditedImage();
    });

function applyFilters() {
    if (currentImage) {
        const brightnessValue =
            brightnessRange.value;
        const contrastValue =
            contrastRange.value;
        const grayscaleValue =
            grayscaleRange.value;
        const blurValue =
            blurRange.value;
        const sepiaValue =
            sepiaRange.value;
        const hueValue = hueRange.value;

        const filterValue = `brightness(${brightnessValue}%)
                             contrast(${contrastValue}%)
                             grayscale(${grayscaleValue}%)
                             blur(${blurValue}px)
                             sepia(${sepiaValue}%)
                             hue-rotate(${hueValue}deg)`;
        previewImage.style.filter =
            filterValue;
    }}

function resetFilters() {
    if (currentImage) {
        brightnessRange.value = 100;
        contrastRange.value = 100;
        grayscaleRange.value = 0;
        blurRange.value = 0;
        sepiaRange.value = 0;
        hueRange.value = 0;
        previewImage.style.filter =
            "none";
    }}

function saveEditedImage() {
    if (currentImage) {
        const canvas =
            document.createElement(
                "canvas"
            );
        canvas.width =
            currentImage.width;
        canvas.height =
            currentImage.height;
        const context =
            canvas.getContext("2d");
        context.filter =
            previewImage.style.filter;
        context.drawImage(
            currentImage,
            0,
            0,
            canvas.width,
            canvas.height
        );

        const link =
            document.createElement("a");
        link.href = canvas.toDataURL(
            "image/jpeg"
        );
        link.download =
            "edited_image.jpg";
        link.click();
    }}

HTML

<!-- Index.html  -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0" />
    <title>Photo Editor</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="container">
        <h1>Photo Editor</h1>
        <input type="file" id="imageInput"
                           accept="image/*" />
        <div class="image-container">
            <img src="placeholder.jpg"
                 alt="Image" id="previewImage" />
        </div>
        <div class="controls">
            <label for="brightness">
                Brightness:
            </label>
            <input type="range" id="brightness"
                   min="0" max="200" value="100" />
            <br/>
            <label for="contrast">
                Contrast:
            </label>
            <input type="range" id="contrast"
                   min="0" max="200" value="100" />
            <br />
            <label for="grayscale">
                Grayscale:
            </label>
            <input type="range" id="grayscale"
                   min="0" max="100" value="0" />
            <br />
            <label for="blur">
                Blur:
            </label>
            <input type="range" id="blur"
                   min="0" max="10" value="0" />
            <br />
            <label for="sepia">
                Sepia:
            </label>
            <input type="range" id="sepia"
                   min="0" max="100" value="0" />
            <br />
            <label for="hue">
                Hue Rotation:
            </label>
            <input type="range" id="hue"
                   min="0" max="360" value="0" />
            <br />
            <button id="reset">Reset</button>
            <button id="save">Save</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS

/* Style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px
        rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

.image-container {
    margin-bottom: 20px;
}

img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.controls {
    text-align: left;
}

label {
    font-weight: bold;
}

input[type="range"] {
    width: 100%;
}

button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin-top: 10px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

Output

photo editor