Image Fujifilm Velvia Filter Effect Tool

async function processImage(originalImg, contrast = 1.2, saturation = 1.4) {

    // Helper function: Convert RGB to HSL
    // r, g, b are in [0, 255]
    // Returns h, s, l in [0, 1]
    function rgbToHsl(r, g, b) {
        r /= 255;
        g /= 255;
        b /= 255;
        const max = Math.max(r, g, b);
        const min = Math.min(r, g, b);
        let h, s, l = (max + min) / 2;

        if (max === min) {
            h = s = 0; // achromatic
        } else {
            const d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch (max) {
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }
        return [h, s, l];
    }

    // Helper function: Convert HSL to RGB
    // h, s, l are in [0, 1]
    // Returns r, g, b in [0, 255]
    function hslToRgb(h, s, l) {
        let r, g, b;

        if (s === 0) {
            r = g = b = l; // achromatic
        } else {
            function hue2rgb(p, q, t) {
                if (t < 0) t += 1;
                if (t > 1) t -= 1;
                if (t < 1 / 6) return p + (q - p) * 6 * t;
                if (t < 1 / 2) return q;
                if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
                return p;
            }
            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            const p = 2 * l - q;
            r = hue2rgb(p, q, h + 1 / 3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1 / 3);
        }
        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // 1. Apply Contrast (in RGB space)
        // Formula: newValue = (oldValue - 128) * factor + 128
        r = (r - 128) * contrast + 128;
        g = (g - 128) * contrast + 128;
        b = (b - 128) * contrast + 128;

        // Clamp values to [0, 255] after contrast
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 2. Convert to HSL to apply saturation and Velvia color emphasis
        let [h, s, l] = rgbToHsl(r, g, b);

        // Apply base saturation from parameter
        s = s * saturation;

        // Velvia-specific saturation boost for certain hues
        // Hue ranges (normalized 0-1):
        // Red: ~0 (wraps around)
        // Yellow: ~0.167
        // Green: ~0.333
        // Cyan: ~0.5
        // Blue: ~0.667
        // Magenta: ~0.833

        // Boost Reds (includes some magentas and oranges near red)
        // e.g., Hue degrees: (340-360, 0-20) -> Normalized: (0.944-1, 0-0.055)
        if ((h >= 0 && h <= 0.055) || (h >= 0.944 && h <= 1)) {
             s = s * 1.20; // Strong boost for reds
        }
        // Boost Oranges/Yellows
        // e.g., Hue degrees: (20-60) -> Normalized: (0.055-0.167)
        else if (h > 0.055 && h <= 0.167) {
             s = s * 1.15; // Good boost for oranges/yellows
        }
        // Boost Greens
        // e.g., Hue degrees: (60-140) -> Normalized: (0.167-0.389)
        else if (h > 0.167 && h <= 0.389) {
             s = s * 1.10; // Moderate boost for greens
        }
        // Note: Blues might desaturate slightly relative to R/G/Y or stay as per base `saturation`

        // Clamp saturation to [0, 1]
        s = Math.max(0, Math.min(1, s));

        // Convert back to RGB
        [r, g, b] = hslToRgb(h, s, l);
        
        // Final clamp, just in case hslToRgb produced
        // slightly out-of-bounds values due to float precision
        data[i] = Math.max(0, Math.min(255, r));
        data[i + 1] = Math.max(0, Math.min(255, g));
        data[i + 2] = Math.max(0, Math.min(255, b));
    }

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