---
layout: default
title: Photo Editor - Edit Photos with Filters and Effects
description: Apply filters, adjust brightness, contrast, saturation, and more to your photos.
permalink: /playground/tools/photo-editor/
---

<link rel="stylesheet" href="../shared/tool-layout.css">

<div class="tool-wrapper">
    <div class="tool-breadcrumb">
        <a href="/playground/tools/">← Back to Tools</a>
    </div>

    <div class="tool-header">
        <h1>Photo Editor</h1>
        <p class="tool-description">Apply filters and adjustments to your photos</p>
    </div>

    <div id="alert" class="alert"></div>

    <div class="tool-content">
        <div class="drop-zone" id="dropZone">
            <div class="drop-zone-icon">🎨</div>
            <div class="drop-zone-text">Click to select an image or drag it here</div>
            <div class="drop-zone-hint">Supports JPG, PNG, GIF, WebP</div>
        </div>
        <input type="file" id="fileInput" class="file-input" accept="image/*">

        <div id="editorContainer" style="display: none; margin-top: 2rem;">
            <h3>Photo Editor</h3>
            <div style="text-align: center; margin-top: 1rem;">
                <canvas id="canvas" style="max-width: 100%; height: auto; border: 2px solid var(--tool-border);"></canvas>
            </div>
        </div>

        <div id="controlsContainer" style="display: none; margin-top: 2rem;">
            <h3>Filters</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.5rem; margin-top: 1rem;">
                <button class="btn btn-secondary filter-btn" data-filter="none">Original</button>
                <button class="btn btn-secondary filter-btn" data-filter="grayscale">Grayscale</button>
                <button class="btn btn-secondary filter-btn" data-filter="sepia">Sepia</button>
                <button class="btn btn-secondary filter-btn" data-filter="invert">Invert</button>
                <button class="btn btn-secondary filter-btn" data-filter="vintage">Vintage</button>
                <button class="btn btn-secondary filter-btn" data-filter="cold">Cold</button>
                <button class="btn btn-secondary filter-btn" data-filter="warm">Warm</button>
            </div>

            <h3 style="margin-top: 2rem;">Adjustments</h3>

            <div class="input-group">
                <label for="brightness">Brightness: <span id="brightnessValue">0</span></label>
                <input type="range" id="brightness" min="-100" max="100" value="0"
                       style="width: 100%; max-width: 400px;">
            </div>

            <div class="input-group">
                <label for="contrast">Contrast: <span id="contrastValue">0</span></label>
                <input type="range" id="contrast" min="-100" max="100" value="0"
                       style="width: 100%; max-width: 400px;">
            </div>

            <div class="input-group">
                <label for="saturation">Saturation: <span id="saturationValue">0</span></label>
                <input type="range" id="saturation" min="-100" max="100" value="0"
                       style="width: 100%; max-width: 400px;">
            </div>

            <div class="input-group">
                <label for="blur">Blur: <span id="blurValue">0</span>px</label>
                <input type="range" id="blur" min="0" max="20" value="0"
                       style="width: 100%; max-width: 400px;">
            </div>

            <div class="input-group">
                <button id="resetBtn" class="btn btn-secondary">Reset All</button>
            </div>

            <h3 style="margin-top: 2rem;">Output</h3>
            <div class="input-group">
                <label for="outputFormat">Format:</label>
                <select id="outputFormat" style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px;">
                    <option value="png">PNG (Best Quality)</option>
                    <option value="jpeg">JPEG</option>
                    <option value="webp">WebP</option>
                </select>
            </div>

            <div id="jpegQualityContainer" style="display: none;">
                <div class="input-group">
                    <label for="jpegQuality">Quality: <span id="qualityValue">90</span>%</label>
                    <input type="range" id="jpegQuality" min="1" max="100" value="90"
                           style="width: 100%; max-width: 400px;">
                </div>
            </div>
        </div>

        <div class="btn-group" style="margin-top: 2rem;">
            <button id="downloadBtn" class="btn btn-primary" style="display: none;">
                Download Edited Photo
            </button>
            <button id="clearBtn" class="btn btn-secondary" style="display: none;">
                Clear
            </button>
        </div>
    </div>

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>7 preset filters (Grayscale, Sepia, Vintage, etc.)</li>
            <li>Brightness adjustment</li>
            <li>Contrast adjustment</li>
            <li>Saturation control</li>
            <li>Blur effect</li>
            <li>Real-time preview</li>
            <li>Multiple output formats</li>
            <li>100% client-side processing</li>
            <li>No file uploads - complete privacy</li>
            <li>Works offline</li>
        </ul>
    </div>
</div>

<script src="../shared/tool-utils.js"></script>
<script src="tool.js"></script>