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

{% block title %}在线应用图像效果 | ToolsForImage | 全面免费的在线工具，提供模糊人脸、图像转换、编辑、调整大小、去除背景、模糊背景等功能{% endblock %}

{% block meta_description %}
<meta name="description" content="使用ToolsForImage应用多种效果来增强您的照片，提供灰度、模糊、锐化等滤镜。">
{% endblock %}

{% block content %}
<h1>免费图像效果工具</h1>
<p>使用ToolsForImage，您可以为您的图像应用各种效果。上传图片，应用效果并下载结果。</p>
<p>上传您的图像文件并即时应用效果。选择您的图像：</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();">从电脑上传</button>
    <br>
    <canvas id="canvas"></canvas>
    <br>
    <div class="effects-container">
        <button type="button" class="effect-button" onclick="toggleEffect('grayscale')">黑白</button>
        <button type="button" class="effect-button" onclick="toggleEffect('blur')">模糊</button>
        <button type="button" class="effect-button" onclick="toggleEffect('sharpen')">锐化</button>
        <button type="button" class="effect-button" onclick="toggleEffect('sepia')">怀旧</button>
        <button type="button" class="effect-button" onclick="toggleEffect('invert')">反色</button>
        <button type="button" class="effect-button" onclick="toggleEffect('brightness')">亮度</button>
        <button type="button" class="effect-button" onclick="toggleEffect('contrast')">对比度</button>
        <button type="button" class="effect-button" onclick="toggleEffect('saturation')">饱和度</button>
    </div>
    <br>
    <button type="button" class="download-button" onclick="downloadEditedImage()">下载编辑后的图片</button>
</form>

<div class="info-container">
    <div class="info-section">
        <h2>什么是图像效果？</h2>
        <p>图像效果是应用于照片上的滤镜或调整，旨在增强其外观或创造特定的视觉风格。通过使用不同的效果，您可以改变图像的颜色、锐度、亮度等，赋予它全新的外观。无论是追求复古风格还是锐利的现代感，图像效果使您可以以创意的方式转换照片。</p>
    </div>
    <div class="info-section">
        <h2>为什么应用图像效果？</h2>
        <p>应用效果可以使您的图像更具表现力。像黑白或棕褐色等效果可以唤起特定的情感或时代，而亮度和对比度调整则有助于微调图像的整体质量。图像效果在创造美学一致性、增强情绪以及使图像更加突出方面非常有用，适用于个人使用、社交媒体或专业项目。通过应用效果，您可以为任何场合赋予图像完美的外观。</p>
    </div>
    <div class="info-section">
        <h2>如何使用我们的图像效果工具</h2>
        <p>我们的图像效果工具使用起来非常简单。只需上传您的照片，从可用选项中选择一个或多个效果，点击应用！您可以使用各种效果来增强您的图像：</p>
        <ul>
            <li><strong>黑白（灰度）：</strong> 移除图像中的所有颜色，赋予其经典的单色外观。</li>
            <li><strong>模糊：</strong> 应用柔焦效果，使图像看起来更平滑或通过模糊其他区域突出特定部分。</li>
            <li><strong>锐化：</strong> 提高图像的清晰度，使边缘更加锋利，改善图像的细节。</li>
            <li><strong>棕褐色：</strong> 给图像添加温暖的棕色调，唤起复古、怀旧的感觉。</li>
        </ul>
    </div>
    
    <div class="info-section">
        <h2>您可以应用的更多效果</h2>
        <p>探索更多选项，以微调您的图像并获得理想的效果：</p>
        <ul>
            <li><strong>反转：</strong> 翻转图像中的颜色，创造引人注目的负片效果。</li>
            <li><strong>亮度：</strong> 调整图像的光线水平，使其更亮或更暗，根据所需的情绪调整。</li>
            <li><strong>对比度：</strong> 改变图像中明暗区域的平衡，赋予照片更戏剧性或微妙的外观。</li>
            <li><strong>饱和度：</strong> 控制颜色的强度，使颜色更加鲜艳或柔和，根据您想要的视觉效果调整。</li>
        </ul>
        <p>我们的工具适用于所有设备，确保在应用这些效果时，您的照片保持其质量，完全控制最终效果。</p>
    </div>
    
    <div class="info-section">
        <h2>使用我们图像效果工具的好处</h2>
        <p>使用我们的图像效果工具，您可以享受以下好处：</p>
        <ul>
            <li><strong>创意控制：</strong> 尝试不同的效果，达到您想要的艺术风格。</li>
            <li><strong>易于使用的界面：</strong> 通过用户友好的设计轻松应用和调整效果。</li>
            <li><strong>无需软件：</strong> 直接从浏览器访问工具，无需额外安装软件。</li>
            <li><strong>即时预览：</strong> 每个效果应用后，实时查看您的照片效果。</li>
            <li><strong>高质量输出：</strong> 确保即使应用了效果，您的照片仍保持清晰和细节。</li>
        </ul>
    </div>
    <div class="info-section">
        <h2>图像效果的常见用途</h2>
        <p>图像效果在各种场景中都有广泛应用，如：</p>
        <ul>
            <li><strong>社交媒体内容：</strong> 使用效果增强您的照片，使其在Instagram、Facebook等平台上脱颖而出。</li>
            <li><strong>摄影编辑：</strong> 为专业摄影项目应用最后的润色，增强其视觉效果。</li>
            <li><strong>市场营销和广告：</strong> 调整图像的色调和情绪，以符合品牌和促销内容。</li>
            <li><strong>个人项目：</strong> 通过尝试不同的效果，将您的个人照片转变为艺术作品。</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 %}