WhatsApp Channel Join Now
Telegram Channel Join Now

How To Create Image Enhancer Tool Website

By |
Image Enhance Tool Website Code
4.3/5 - (6 votes)
Contents hide
1 Html Code
2 CSS Code
3 Javascript Code

Html Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Image Enhancer - Free Online Photo Quality Tool</title>
    <meta name="description" content="Enhance image quality instantly with AI-powered editing. Improve brightness, contrast, sharpness with real-time preview. Perfect for social media and professional use.">
    
    <!-- Google Analytics (Replace GA-XXXXXX with your ID) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=GA-XXXXXX"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'GA-XXXXXX');
    </script>
    
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="theme-toggle">
        <button id="themeBtn">🌓 Toggle Theme</button>
    </div>
    
    <div class="container">
        <!-- Top Ad -->
        <div class="ad-container">
            [Your Ad Code Here]
        </div>

        <h1>AI Image Enhancer</h1>
        
        <div class="upload-section">
            <input type="file" id="imageInput" accept="image/*" hidden>
            <button id="uploadBtn">📤 Upload Image</button>
            <button id="autoEnhanceBtn">🤖 Auto Enhance</button>
            <button id="downloadBtn">⏬ Download</button>
        </div>

        <div class="comparison-container">
            <div class="image-container">
                <img src="" alt="Original" id="originalImage">
                <img src="" alt="Enhanced" id="enhancedImage">
                <div class="slider"></div>
            </div>
        </div>

        <div class="controls">
            <div class="control-group">
                <button id="rotateLeftBtn">↺ Rotate Left</button>
                <button id="rotateRightBtn">↻ Rotate Right</button>
            </div>
            
            <div class="control-group">
                <label>🔆 Brightness</label>
                <input type="range" id="brightness" min="-100" max="100" value="0">
            </div>
            <div class="control-group">
                <label>🌈 Contrast</label>
                <input type="range" id="contrast" min="-100" max="100" value="0">
            </div>
            <div class="control-group">
                <label>🎨 Saturation</label>
                <input type="range" id="saturation" min="-100" max="100" value="0">
            </div>
            <div class="control-group">
                <label>🔍 Sharpness</label>
                <input type="range" id="sharpness" min="0" max="100" value="0">
            </div>
            
            <div class="control-group">
                <label>📁 Format</label>
                <select id="formatSelect">
                    <option value="png">PNG</option>
                    <option value="jpeg">JPEG</option>
                </select>
            </div>
            
            <button id="resetBtn">🔄 Reset All</button>
        </div>

        <!-- Middle Ad -->
        <div class="ad-container">
            [Your Ad Code Here]
        </div>

        <!-- SEO Article -->
        <article class="seo-content">
            <h2>Free Online Image Quality Enhancement Guide</h2>
            
            <section>
                <h3>Transform Your Photos Instantly</h3>
                <p>Our AI-powered tool helps you enhance images in seconds. Perfect for:</p>
                <ul>
                    <li>Social media content creation</li>
                    <li>E-commerce product photos</li>
                    <li>Professional photography editing</li>
                    <li>Restoring old pictures</li>
                </ul>
            </section>

            <section>
                <h3>How It Works</h3>
                <div class="steps">
                    <div class="step">
                        <div class="step-number">1</div>
                        <h4>Upload</h4>
                        <p>Select any JPG/PNG image from your device</p>
                    </div>
                    <div class="step">
                        <div class="step-number">2</div>
                        <h4>Enhance</h4>
                        <p>Use AI enhancement or manual adjustments</p>
                    </div>
                    <div class="step">
                        <div class="step-number">3</div>
                        <h4>Download</h4>
                        <p>Get HD-quality results instantly</p>
                    </div>
                </div>
            </section>

            <!-- More article sections... -->
        </article>

        <!-- Bottom Ad -->
        <div class="ad-container sticky-ad">
            [Your Ad Code Here]
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS Code

:root {
    --primary-color: #00ff9d;
    --background-color: #1a1a1a;
    --text-color: #ffffff;
    --control-bg: #2d2d2d;
    --border-color: #444;
}

[data-theme="light"] {
    --background-color: #f5f5f5;
    --text-color: #1a1a1a;
    --control-bg: #ffffff;
    --border-color: #ddd;
    --primary-color: #007bff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: 0.3s all;
}

body {
    background: var(--background-color);
    color: var(--text-color);
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

h1 {
    text-align: center;
    margin: 2rem 0;
    color: var(--primary-color);
    font-size: 2.5rem;
}

.upload-section {
    display: flex;
    gap: 1rem;
    margin: 2rem 0;
    justify-content: center;
    flex-wrap: wrap;
}

button {
    padding: 1rem 2rem;
    background: var(--primary-color);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    color: var(--background-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comparison-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 255, 157, 0.2);
}

.image-container {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 400px;
}

#originalImage,
#enhancedImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slider {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: var(--primary-color);
    cursor: col-resize;
    z-index: 10;
}

.controls {
    background: var(--control-bg);
    padding: 2rem;
    border-radius: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.seo-content {
    background: var(--control-bg);
    padding: 2rem;
    border-radius: 15px;
    margin: 3rem 0;
}

.seo-content h2 {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.ad-container {
    background: var(--control-bg);
    padding: 1.5rem;
    border-radius: 10px;
    margin: 2rem 0;
    text-align: center;
    border: 1px solid var(--border-color);
}

.sticky-ad {
    position: sticky;
    bottom: 20px;
    background: var(--primary-color);
    color: var(--background-color);
}

@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
    
    .image-container {
        height: 50vh;
    }
}

Javascript Code

document.addEventListener('DOMContentLoaded', () => {
    // Theme Toggle
    const themeBtn = document.getElementById('themeBtn');
    const body = document.body;
    
    function toggleTheme() {
        const currentTheme = body.getAttribute('data-theme') || 'dark';
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        body.setAttribute('data-theme', newTheme);
        localStorage.setItem('theme', newTheme);
    }
    
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) body.setAttribute('data-theme', savedTheme);
    themeBtn.addEventListener('click', toggleTheme);

    // Image Processor
    const elements = {
        imageInput: document.getElementById('imageInput'),
        uploadBtn: document.getElementById('uploadBtn'),
        downloadBtn: document.getElementById('downloadBtn'),
        autoEnhanceBtn: document.getElementById('autoEnhanceBtn'),
        originalImage: document.getElementById('originalImage'),
        enhancedImage: document.getElementById('enhancedImage'),
        brightness: document.getElementById('brightness'),
        contrast: document.getElementById('contrast'),
        saturation: document.getElementById('saturation'),
        sharpness: document.getElementById('sharpness'),
        resetBtn: document.getElementById('resetBtn'),
        slider: document.querySelector('.slider'),
        rotateLeftBtn: document.getElementById('rotateLeftBtn'),
        rotateRightBtn: document.getElementById('rotateRightBtn'),
        formatSelect: document.getElementById('formatSelect')
    };

    let state = {
        currentImage: null,
        enhancedCanvas: null,
        isDragging: false,
        rotationAngle: 0
    };

    // Event Listeners
    elements.uploadBtn.addEventListener('click', () => elements.imageInput.click());
    elements.imageInput.addEventListener('change', handleImageUpload);
    elements.slider.addEventListener('mousedown', startDragging);
    document.addEventListener('mousemove', handleDragging);
    document.addEventListener('mouseup', stopDragging);
    elements.resetBtn.addEventListener('click', resetControls);
    elements.autoEnhanceBtn.addEventListener('click', autoEnhance);
    elements.rotateLeftBtn.addEventListener('click', () => rotateImage(-90));
    elements.rotateRightBtn.addEventListener('click', () => rotateImage(90));
    elements.downloadBtn.addEventListener('click', downloadImage);
    
    [elements.brightness, elements.contrast, elements.saturation, elements.sharpness]
        .forEach(control => control.addEventListener('input', updateImage));

    function handleImageUpload(e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = (event) => {
            elements.originalImage.onload = () => {
                initializeImageProcessing(event.target.result);
            };
            elements.originalImage.src = event.target.result;
            elements.enhancedImage.src = event.target.result;
        };
        reader.readAsDataURL(file);
    }

    function initializeImageProcessing(imageSrc) {
        state.enhancedCanvas = new fabric.Canvas(null, {
            width: elements.originalImage.naturalWidth,
            height: elements.originalImage.naturalHeight
        });

        fabric.Image.fromURL(imageSrc, (img) => {
            state.currentImage = img;
            state.enhancedCanvas.add(state.currentImage);
            updateImage();
        });
    }

    function updateImage() {
        if (!state.currentImage) return;

        const filters = [
            new fabric.Image.filters.Brightness({
                brightness: elements.brightness.value / 100
            }),
            new fabric.Image.filters.Contrast({
                contrast: elements.contrast.value / 100
            }),
            new fabric.Image.filters.Saturation({
                saturation: elements.saturation.value
            }),
            new fabric.Image.filters.Convolute({
                matrix: [0, -1, 0, -1, 5, -1, 0, -1, 0],
                opacity: elements.sharpness.value / 100
            })
        ];

        state.currentImage.filters = filters;
        state.currentImage.applyFilters();
        state.enhancedCanvas.renderAll();
        elements.enhancedImage.src = state.enhancedCanvas.toDataURL();
    }

    function autoEnhance() {
        elements.brightness.value = 15;
        elements.contrast.value = 20;
        elements.saturation.value = 25;
        elements.sharpness.value = 30;
        updateImage();
    }

    function rotateImage(degrees) {
        state.rotationAngle += degrees;
        state.currentImage.angle = state.rotationAngle;
        state.enhancedCanvas.renderAll();
        elements.enhancedImage.src = state.enhancedCanvas.toDataURL();
    }

    function downloadImage() {
        if (!state.enhancedCanvas) return;
        
        const tempCanvas = document.createElement('canvas');
        const ctx = tempCanvas.getContext('2d');
        const scaleFactor = 2;
        
        tempCanvas.width = state.enhancedCanvas.width * scaleFactor;
        tempCanvas.height = state.enhancedCanvas.height * scaleFactor;
        ctx.scale(scaleFactor, scaleFactor);
        ctx.drawImage(state.enhancedCanvas.getElement(), 0, 0);
        
        const link = document.createElement('a');
        link.download = `enhanced-image.${elements.formatSelect.value}`;
        link.href = tempCanvas.toDataURL(`image/${elements.formatSelect.value}`, 1.0);
        link.click();
    }

    function resetControls() {
        elements.brightness.value = 0;
        elements.contrast.value = 0;
        elements.saturation.value = 0;
        elements.sharpness.value = 0;
        state.rotationAngle = 0;
        updateImage();
    }

    function startDragging(e) {
        state.isDragging = true;
        document.body.style.cursor = 'col-resize';
    }

    function handleDragging(e) {
        if (!state.isDragging) return;
        const rect = elements.enhancedImage.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const percentage = (x / rect.width) * 100;
        const pos = Math.max(0, Math.min(100, percentage));
        
        elements.enhancedImage.style.clipPath = `inset(0 ${100 - pos}% 0 0)`;
        elements.slider.style.left = `${pos}%`;
    }

    function stopDragging() {
        state.isDragging = false;
        document.body.style.cursor = 'default';
    }
});

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *