{% extends "en/base.html" %}

{% block title %}Apply Image Effects online on images | ToolsForImage | Comprehensive Free Online Tools for Blur Faces, Image Conversion, Editing, Resizing, Remove Background, Blur background and More{% endblock %}

{% block meta_description %}
<meta name="description" content="Apply various effects to your images with ToolsForImage. Enhance your photos with filters like grayscale, blur, sharpen, and more.">
{% endblock %}

{% block content %}
<h1>Free Image Effects Tool</h1>
<p>Enhance your images with various effects using ToolsForImage. Upload an image, apply effects, and download the result.</p>
<p>Upload your image file and apply effects instantly. Choose your image:</p>
<form id="effects-form" method="post" enctype="multipart/form-data">
    <input type="file" id="image-upload" name="image" accept="image/*" style="display: none;" onchange="previewImage(event)">
    <button type="button" class="upload-button" onclick="document.getElementById('image-upload').click();">Upload from Computer</button>
    <br>
    <canvas id="canvas"></canvas>
    <br>
    <div class="effects-container">
        <button type="button" class="effect-button" onclick="toggleEffect('grayscale')">Black and White</button>
        <button type="button" class="effect-button" onclick="toggleEffect('blur')">Blur</button>
        <button type="button" class="effect-button" onclick="toggleEffect('sharpen')">Sharpen</button>
        <button type="button" class="effect-button" onclick="toggleEffect('sepia')">Sepia</button>
        <button type="button" class="effect-button" onclick="toggleEffect('invert')">Invert</button>
        <button type="button" class="effect-button" onclick="toggleEffect('brightness')">Brightness</button>
        <button type="button" class="effect-button" onclick="toggleEffect('contrast')">Contrast</button>
        <button type="button" class="effect-button" onclick="toggleEffect('saturation')">Saturation</button>
    </div>
    <br>
    <button type="button" class="download-button" onclick="downloadEditedImage()">Download Edited Image</button>
</form>

<div class="info-container">
    <div class="info-section">
        <h2>What Are Image Effects?</h2>
        <p>Image effects are filters or adjustments applied to photos to enhance their appearance or create a specific visual style. By using different effects, you can modify an image's colors, sharpness, brightness, and more, giving it a whole new look. Whether you're aiming for a vintage feel or a sharp modern edge, image effects allow you to transform your photos in creative ways.</p>
    </div>
    <div class="info-section">
        <h2>Why Apply Image Effects?</h2>
        <p>Applying effects to your images can bring out the best in your photos. Effects like black and white or sepia can evoke certain emotions or time periods, while others like brightness and contrast adjustments help fine-tune the overall image quality. Image effects are useful in creating aesthetic consistency, enhancing mood, and making images stand out, whether for personal use, social media, or professional projects. By applying effects, you can give your images the perfect look for any occasion.</p>
    </div>
    <div class="info-section">
        <h2>How to Use Our Image Effects Tool</h2>
        <p>Our image effects tool is easy to use. Simply upload your photo, choose one or more effects from the available options, and click to apply! You can enhance your images with a variety of effects:</p>
        <ul>
            <li><strong>Black and White (Grayscale):</strong> Remove all colors from your image, giving it a classic monochrome look.</li>
            <li><strong>Blur:</strong> Apply a soft focus effect, making the image appear smoother or highlighting specific areas by blurring others.</li>
            <li><strong>Sharpen:</strong> Increase the definition of the image, making edges crisper and improving clarity.</li>
            <li><strong>Sepia:</strong> Add a warm brown tone to your image, evoking a vintage, nostalgic feel.</li>
        </ul>
    </div>
    
    <div class="info-section">
        <h2>More Effects You Can Apply</h2>
        <p>Explore additional options to fine-tune your images and achieve the desired look:</p>
        <ul>
            <li><strong>Invert:</strong> Flip the colors in your image for a striking negative effect.</li>
            <li><strong>Brightness:</strong> Adjust the light levels in your image to make it brighter or darker, depending on the desired mood.</li>
            <li><strong>Contrast:</strong> Change the balance between light and dark areas, giving your photo a more dramatic or subtle look.</li>
            <li><strong>Saturation:</strong> Control the intensity of colors, making them more vibrant or muted, depending on the visual impact you want.</li>
        </ul>
        <p>Our tool works across all devices and ensures that your photos retain their quality while applying these effects, giving you full control over the final result.</p>
    </div>
    
    <div class="info-section">
        <h2>Benefits of Using Our Image Effects Tool</h2>
        <p>By using our image effects tool, you can enjoy a wide range of benefits:</p>
        <ul>
            <li><strong>Creative Control:</strong> Experiment with various effects to achieve your desired artistic style.</li>
            <li><strong>Easy-to-Use Interface:</strong> Apply and adjust effects effortlessly with a user-friendly design.</li>
            <li><strong>No Software Needed:</strong> Access the tool directly from your browser without the need for additional software.</li>
            <li><strong>Instant Preview:</strong> See how your photo looks with each effect applied in real time.</li>
            <li><strong>High-Quality Output:</strong> Ensure your photos maintain sharpness and detail, even after applying effects.</li>
        </ul>
    </div>
    <div class="info-section">
        <h2>Common Use Cases for Image Effects</h2>
        <p>Image effects are commonly used in various scenarios, such as:</p>
        <ul>
            <li><strong>Social Media Content:</strong> Enhance your photos with effects that make them stand out on platforms like Instagram and Facebook.</li>
            <li><strong>Photography Editing:</strong> Apply finishing touches to professional photography projects to enhance their visual impact.</li>
            <li><strong>Marketing and Advertising:</strong> Adjust the tone and mood of images to align with branding and promotional content.</li>
            <li><strong>Personal Projects:</strong> Transform your personal photos into artistic pieces by experimenting with different effects.</li>
        </ul>
    </div>
</div>

<style>
    h1 {
        color: var(--secondary-color);
        font-family: var(--font-family);
        text-align: center;
    }

    main {
        padding: 2em;
        text-align: center;
    }

    .upload-button {
        background-color: var(--link-hover-color); 
        color: var(--background-color);
        padding: 20px 40px;
        border: none;
        cursor: pointer;
        font-size: 20px;
        transition: transform 0.3s;
        border-radius: 5px;
    }

    .upload-button:hover {
        transform: scale(1.1);
    }

    .effect-button {
        background-color: var(--link-hover-color); 
        color: var(--background-color);
        border: 2px solid var(--box-hover-color);
        padding: 10px 20px;
        cursor: pointer;
        font-size: 18px;
        margin: 10px;
        transition: transform 0.3s;
        border-radius: 5px;
    }

    .effect-button.active {
        background-color: var(--box-hover-color);
        color: var(--background-color);
    }

    .effect-button:hover {
        transform: scale(1.1);
        background-color: var(--box-hover-text-color);
    }

    canvas {
        max-width: 100%;
        margin: 20px auto;
        display: none;
        border: 2px solid var(--box-hover-color);
        border-radius: 5px;
    }

    .download-button {
        background-color: var(--background-color);
        color: var(--box-hover-color);
        border: 2px solid var(--box-hover-color);
        padding: 10px 20px;
        cursor: pointer;
        font-size: 20px;
        transition: transform 0.3s;
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 5px;
    }

    .effects-container {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    li {
        line-height: 1.6;
    }
</style>

<script>
    let canvas, ctx, img, originalImageData;
    let activeEffects = [];

    function validateImageSelection() {
        const imageUpload = document.getElementById('image-upload');
        if (!imageUpload.value) {
            alert('Please select an image to upload.');
            return false;
        }
        return true;
    }

    function previewImage(event) {
        const file = event.target.files[0];
        if (file) {
            img = new Image();
            img.onload = function() {
                canvas = document.getElementById('canvas');
                canvas.width = img.width;
                canvas.height = img.height;
                ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, img.width, img.height);
                canvas.style.display = 'block';
                originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            }
            img.src = URL.createObjectURL(file);
        }
    }

    function toggleEffect(effect) {
        if (!canvas) {
            alert('Please upload an image first.');
            return;
        }

        const index = activeEffects.indexOf(effect);
        if (index > -1) {
            activeEffects.splice(index, 1);
        } else {
            activeEffects.push(effect);
        }

        const button = document.querySelector(`.effect-button[onclick="toggleEffect('${effect}')"]`);
        button.classList.toggle('active');

        applyEffects();
    }

    function applyEffects() {
        ctx.putImageData(originalImageData, 0, 0);
        let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;

        if (activeEffects.includes('grayscale')) {
            for (let i = 0; i < data.length; i += 4) {
                const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
                data[i] = data[i + 1] = data[i + 2] = avg;
            }
        }

        if (activeEffects.includes('blur')) {
            boxBlur(imageData, canvas.width, canvas.height, 3);
        }

        if (activeEffects.includes('sharpen')) {
            sharpen(imageData, canvas.width, canvas.height);
        }

        if (activeEffects.includes('sepia')) {
            for (let i = 0; i < data.length; i += 4) {
                const r = data[i];
                const g = data[i + 1];
                const b = data[i + 2];
                data[i] = (r * 0.393) + (g * 0.769) + (b * 0.189);
                data[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168);
                data[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131);
            }
        }

        if (activeEffects.includes('invert')) {
            for (let i = 0; i < data.length; i += 4) {
                data[i] = 255 - data[i];
                data[i + 1] = 255 - data[i + 1];
                data[i + 2] = 255 - data[i + 2];
            }
        }

        if (activeEffects.includes('brightness')) {
            const brightnessValue = 50;
            for (let i = 0; i < data.length; i += 4) {
                data[i] += brightnessValue;
                data[i + 1] += brightnessValue;
                data[i + 2] += brightnessValue;
            }
        }

        if (activeEffects.includes('contrast')) {
            const contrastFactor = 1.5;
            for (let i = 0; i < data.length; i += 4) {
                data[i] = ((data[i] - 128) * contrastFactor) + 128;
                data[i + 1] = ((data[i + 1] - 128) * contrastFactor) + 128;
                data[i + 2] = ((data[i + 2] - 128) * contrastFactor) + 128;
            }
        }

        if (activeEffects.includes('saturation')) {
            const saturationFactor = 1.5;
            for (let i = 0; i < data.length; i += 4) {
                const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
                data[i] = avg + (data[i] - avg) * saturationFactor;
                data[i + 1] = avg + (data[i + 1] - avg) * saturationFactor;
                data[i + 2] = avg + (data[i + 2] - avg) * saturationFactor;
            }
        }

        ctx.putImageData(imageData, 0, 0);
    }

    function boxBlur(imageData, width, height, radius) {
        const pixels = imageData.data;
        const temp = new Uint8ClampedArray(pixels.length);
        const boxSize = (radius * 2 + 1) * (radius * 2 + 1);

        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
                let r = 0, g = 0, b = 0;

                for (let ky = -radius; ky <= radius; ky++) {
                    for (let kx = -radius; kx <= radius; kx++) {
                        const px = Math.min(width - 1, Math.max(0, x + kx));
                        const py = Math.min(height - 1, Math.max(0, y + ky));
                        const i = (py * width + px) * 4;
                        r += pixels[i];
                        g += pixels[i + 1];
                        b += pixels[i + 2];
                    }
                }

                const i = (y * width + x) * 4;
                temp[i] = r / boxSize;
                temp[i + 1] = g / boxSize;
                temp[i + 2] = b / boxSize;
                temp[i + 3] = pixels[i + 3];
            }
        }

        for (let i = 0; i < pixels.length; i++) {
            pixels[i] = temp[i];
        }
    }

    function sharpen(imageData, width, height) {
        const pixels = imageData.data;
        const temp = new Uint8ClampedArray(pixels.length);
        const kernel = [
            0, -1, 0,
            -1, 5, -1,
            0, -1, 0
        ];

        for (let y = 1; y < height - 1; y++) {
            for (let x = 1; x < width - 1; x++) {
                const i = (y * width + x) * 4;
                let r = 0, g = 0, b = 0;

                for (let ky = -1; ky <= 1; ky++) {
                    for (let kx = -1; kx <= 1; kx++) {
                        const ki = ((y + ky) * width + (x + kx)) * 4;
                        const kw = kernel[(ky + 1) * 3 + (kx + 1)];
                        r += pixels[ki] * kw;
                        g += pixels[ki + 1] * kw;
                        b += pixels[ki + 2] * kw;
                    }
                }

                temp[i] = Math.min(255, Math.max(0, r));
                temp[i + 1] = Math.min(255, Math.max(0, g));
                temp[i + 2] = Math.min(255, Math.max(0, b));
                temp[i + 3] = pixels[i + 3];
            }
        }

        for (let i = 0; i < pixels.length; i++) {
            pixels[i] = temp[i];
        }
    }

    function downloadEditedImage() {
        if (!canvas) {
            alert('Please upload an image first.');
            return;
        }

        const downloadLink = document.createElement('a');
        downloadLink.href = canvas.toDataURL('image/png');
        downloadLink.download = 'edited_image.png';
        downloadLink.click();
    }
</script>
{% endblock %}