Image Of Young Woman Sitting In Metro In Jan Saudek Style

/**
 * Applies a photographic style inspired by Jan Saudek to an image.
 * This style is characterized by hand-colored, high-contrast, sepia-toned photographs with grain and vignetting.
 *
 * @param {HTMLImageElement} originalImg The original image element.
 * @param {number} sepiaIntensity A value from 0 (grayscale) to 1 (full sepia) for the base tone. Default is 1.
 * @param {number} colorSaturation A value from 0 (no color) to 1 (full color) that controls how much of the original color is blended back in, simulating hand-coloring. Default is 0.6.
 * @param {number} contrast A value for contrast enhancement. 1 is no change. Values between 1 and 2 are recommended. Default is 1.2.
 * @param {number} grainAmount The intensity of the film grain effect. 0 is no grain. Default is 15.
 * @param {number} vignetteStrength The darkness of the vignette at the edges, from 0 (transparent) to 1 (black). Default is 0.7.
 * @param {number} vignetteSoftness The size of the vignette's soft fade, from 0 to 1. A higher value means a larger central bright area. Default is 0.5.
 * @returns {HTMLCanvasElement} A new canvas element with the stylized image.
 */
function processImage(originalImg, sepiaIntensity = 1, colorSaturation = 0.6, contrast = 1.2, grainAmount = 15, vignetteStrength = 0.7, vignetteSoftness = 0.5) {
    // 1. Setup Canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;

    // 2. Create the base sepia layer by converting the image to B&W and tinting it.
    ctx.drawImage(originalImg, 0, 0, w, h);
    const imageData = ctx.getImageData(0, 0, w, h);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i],
            g = data[i + 1],
            b = data[i + 2];

        // Convert to grayscale using the luminosity method
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // Apply a classic sepia tone formula
        const sepiaR = (gray * 0.393) + (gray * 0.769) + (gray * 0.189);
        const sepiaG = (gray * 0.349) + (gray * 0.686) + (gray * 0.168);
        const sepiaB = (gray * 0.272) + (gray * 0.534) + (gray * 0.131);

        // Blend the sepia effect with the grayscale based on intensity
        data[i] = (1 - sepiaIntensity) * gray + sepiaIntensity * sepiaR;
        data[i + 1] = (1 - sepiaIntensity) * gray + sepiaIntensity * sepiaG;
        data[i + 2] = (1 - sepiaIntensity) * gray + sepiaIntensity * sepiaB;
    }
    ctx.putImageData(imageData, 0, 0);

    // 3. Blend original colors back on top to simulate hand-coloring.
    // The 'color' composite operation takes the hue and saturation from the source image
    // and the luminosity from the destination (our sepia canvas).
    ctx.globalCompositeOperation = 'color';
    ctx.globalAlpha = colorSaturation; // Control the strength of the coloring
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Reset composite settings
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 1.0;

    // 4. Apply final adjustments: Contrast and Grain
    const finalImageData = ctx.getImageData(0, 0, w, h);
    const finalData = finalImageData.data;
    const intercept = 128 * (1 - contrast);

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

        // Apply Contrast
        r = r * contrast + intercept;
        g = g * contrast + intercept;
        b = b * contrast + intercept;

        // Apply Grain
        const grain = (Math.random() - 0.5) * grainAmount;
        r += grain;
        g += grain;
        b += grain;

        // Clamp values to the 0-255 range
        finalData[i] = Math.max(0, Math.min(255, r));
        finalData[i + 1] = Math.max(0, Math.min(255, g));
        finalData[i + 2] = Math.max(0, Math.min(255, b));
    }
    ctx.putImageData(finalImageData, 0, 0);

    // 5. Add Vignette
    const centerX = w / 2;
    const centerY = h / 2;
    const outerRadius = Math.sqrt(centerX * centerX + centerY * centerY);
    const innerRadius = outerRadius * vignetteSoftness;

    const gradient = ctx.createRadialGradient(
        centerX, centerY, innerRadius,
        centerX, centerY, outerRadius
    );
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(1, `rgba(0,0,0,${vignetteStrength})`);

    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, w, h);

    return canvas;
}