JavaScript  

create a Artistic Photo Filters using html css and javascript

Creating an artistic photo filter application with an attractive and responsive UI is a great way to explore front-end web development and image processing techniques. By combining HTML, CSS, and JavaScript, you can build a web app that allows users to upload photos, apply stylish visual effects, and instantly preview the results in real time.

An artistic photo filter app not only improves the appearance of images but also provides users with a creative editing experience directly in the browser without requiring advanced software. From vintage tones and black-and-white effects to brightness adjustments and blur filters, these features can be implemented efficiently using modern CSS filters and JavaScript canvas manipulation.

Preview

Prerequisites

  • HTML

  • CSS

  • Javascript

Approach:

  • Create a list of predefined artistic filters (e.g. grayscale, sepia, vintage).

  • Allow users to select a filter from dropdown or a set of buttons. Allow users to select multiple filters to apply in sequence.

  • Use JavaScript to apply the selected filter to the uploaded image.

Example :

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>The Artistic Photo Filters</title>
</head>
<body>
    <header>
        <h1>Artistic Photo Filters</h1>
    </header>
    <div class="container">
        <input type="file" id="uploadImage" accept="image/*">
        <canvas id="canvas"></canvas>
        <div class="filter-options">
            <label for="selectFilter">Select a Filter:</label>
            <select id="selectFilter">
                <option value="none">None</option>
                <option value="grayscale">Grayscale</option>
                <option value="sepia">Sepia</option>
            </select>
            <button id="applyFilter">Apply Filter</button>
            <button id="clearFilter">Clear Filter</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    background-color:#008000;
    margin: 0;
    padding: 0;
}
header {
    background-color: #0000FF;
    color: white;
    text-align: center;
    padding: 20px;
}
h1 {
    margin: 0;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    flex-direction: column;
}
canvas {
    border: 2px solid #ccc;
    max-width: 100%;
}
.filter-options {
    margin-top: 10px;
    text-align: center;
}
select, button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
    margin: 5px;
}

Javascript

document.addEventListener('DOMContentLoaded', function () {
    const uploadImage = document.getElementById('uploadImage');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const selectFilter = document.getElementById('selectFilter');
    const applyFilterButton = document.getElementById('applyFilter');
    const clearFilterButton = document.getElementById('clearFilter');
    let image;
    let originalImage;

    uploadImage.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            const imageUrl = URL.createObjectURL(file);
            const img = new Image();
            img.src = imageUrl;
            img.onload = () => {
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0);
                image = ctx.getImageData(0, 0, img.width, img.height);
                originalImage = ctx.getImageData(0, 0, img.width, img.height);
            };
        }
    });
    applyFilterButton.addEventListener('click', () => {
        if (image) {
            const selectedFilter = selectFilter.value;
            applyFilter(selectedFilter);
        }
    });
    clearFilterButton.addEventListener('click', () => {
        if (originalImage) {
            ctx.putImageData(originalImage, 0, 0);
            image = ctx.getImageData(0, 0, canvas.width, canvas.height);
        }
    });
    function applyFilter(filter) {
        switch (filter) {
            case 'grayscale':
                GrayscaleFilter();
                break;
            case 'sepia':
                SepiaFilter();
                break;
            case 'none':
            default:
                ctx.putImageData(originalImage, 0, 0);
                image = ctx.getImageData(0, 0, canvas.width, canvas.height);
                break;
        }
    }
    function GrayscaleFilter() {
        for (let i = 0; i < image.data.length; i += 4) {
            const average = (image.data[i] + image.data[i + 1] + image.data[i + 2]) / 3;
            image.data[i] = average;
            image.data[i + 1] = average;
            image.data[i + 2] = average;
        }
        ctx.putImageData(image, 0, 0);
    }
    function SepiaFilter() {
        for (let i = 0; i < image.data.length; i += 4) {
            const originalR = image.data[i];
            const originalG = image.data[i + 1];
            const originalB = image.data[i + 2];
            const newR = Math.min(255, (originalR * 0.393) + (originalG * 0.769) + (originalB * 0.189));
            const newG = Math.min(255, (originalR * 0.349) + (originalG * 0.686) + (originalB * 0.168));
            const newB = Math.min(255, (originalR * 0.272) + (originalG * 0.534) + (originalB * 0.131));
            image.data[i] = newR;
            image.data[i + 1] = newG;
            image.data[i + 2] = newB;
        }
        ctx.putImageData(image, 0, 0);
    }
});

output

Membership not found