Image Dirty Toad Filter

function processImage(originalImg, contrast = 50, noiseLevel = 45, vignetteOpacity = 0.7) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas dimensions to match the original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);
    
    // Get image data for pixel manipulation
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    
    // Calculate contrast factor
    const factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
    
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        
        // 1. Partial Desaturation to make colors look "dirty" and muted
        const luma = 0.299 * r + 0.587 * g + 0.114 * b;
        r = r * 0.4 + luma * 0.6;
        g = g * 0.4 + luma * 0.6;
        b = b * 0.4 + luma * 0.6;
        
        // 2. Swampy/Toad color grading (Boost green, reduce blue, slightly reduce red for an olive/muddy hue)
        r = r * 0.9 + 10;
        g = g * 1.2 + 20;
        b = b * 0.6 - 10;
        
        // 3. Contrast Adjustment (Gritty look)
        r = factor * (r - 128) + 128;
        g = factor * (g - 128) + 128;
        b = factor * (b - 128) + 128;
        
        // 4. Add Noise (Dirt/Grain)
        const noise = (Math.random() - 0.5) * 2 * noiseLevel;
        r += noise;
        g += noise;
        b += noise;
        
        // 5. Clamp values to 0-255 bounds
        data[i] = Math.min(255, Math.max(0, r));
        data[i + 1] = Math.min(255, Math.max(0, g));
        data[i + 2] = Math.min(255, Math.max(0, b));
    }
    
    // Write modified pixel data back to the canvas
    ctx.putImageData(imageData, 0, 0);
    
    // 6. Draw a Dark/Swampy Vignette to finish the "Грязножаба" (Dirty Toad) aesthetic
    const cx = canvas.width / 2;
    const cy = canvas.height / 2;
    const radius = Math.min(canvas.width, canvas.height);
    
    const gradient = ctx.createRadialGradient(
        cx, cy, radius * 0.3,
        cx, cy, radius * 0.9
    );
    
    // Transparent center to dark murky greenish-black edges
    gradient.addColorStop(0, 'rgba(15, 25, 10, 0)');
    gradient.addColorStop(1, `rgba(15, 25, 10, ${vignetteOpacity})`);
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    return canvas;
}