Image Victorian Style Converter

/**
 * Converts an image to a Victorian-era photographic style, featuring sepia tones,
 * reduced contrast, added grain, and a vignette effect.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} sepiaIntensity A number from 0 to 1 representing the strength of the sepia effect. 0 is pure grayscale, 1 is full sepia. Default is 1.
 * @param {number} vignetteIntensity A number from 0 to 1 controlling the size and darkness of the vignette (darkened corners). 0 for no vignette, 1 for a strong one. Default is 0.6.
 * @param {number} noiseAmount A number representing the amount of grain/noise to add. Recommended range 0-50. Default is 25.
 * @param {number} contrast A number from -100 to 100 to adjust the contrast. Negative values reduce contrast, which is typical for this style. Default is -20.
 * @returns {HTMLCanvasElement} A canvas element displaying the processed image.
 */
function processImage(originalImg, sepiaIntensity = 1, vignetteIntensity = 0.6, noiseAmount = 25, contrast = -20) {
    // 1. Create a canvas and get its 2D context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // 2. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 3. Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Pre-calculate the contrast factor. The formula is derived from a standard contrast algorithm.
    const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));

    // 4. Iterate over each pixel (4 values at a time: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // --- Apply Contrast ---
        // The formula centers the color channel around 128, applies the factor, and re-adds 128.
        r = contrastFactor * (r - 128) + 128;
        g = contrastFactor * (g - 128) + 128;
        b = contrastFactor * (b - 128) + 128;

        // --- Apply Sepia Tone & Grayscale ---
        // Classic sepia RGB calculations
        const tr = 0.393 * r + 0.769 * g + 0.189 * b;
        const tg = 0.349 * r + 0.686 * g + 0.168 * b;
        const tb = 0.272 * r + 0.534 * g + 0.131 * b;

        // Luminance-based grayscale calculation (for blending)
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // Linearly interpolate between grayscale and sepia based on sepiaIntensity
        data[i] = gray * (1 - sepiaIntensity) + tr * sepiaIntensity;
        data[i + 1] = gray * (1 - sepiaIntensity) + tg * sepiaIntensity;
        data[i + 2] = gray * (1 - sepiaIntensity) + tb * sepiaIntensity;

        // --- Add Noise ---
        if (noiseAmount > 0) {
            // Add a random value (positive or negative) to each channel
            const noise = (0.5 - Math.random()) * noiseAmount;
            data[i] += noise;
            data[i + 1] += noise;
            data[i + 2] += noise;
        }

        // --- Clamp values ---
        // Ensure the RGB values stay within the valid 0-255 range
        data[i] = Math.max(0, Math.min(255, data[i]));
        data[i + 1] = Math.max(0, Math.min(255, data[i + 1]));
        data[i + 2] = Math.max(0, Math.min(255, data[i + 2]));
    }

    // 5. Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // 6. Apply Vignette effect over the top
    if (vignetteIntensity > 0) {
        const outerRadius = Math.sqrt(width * width + height * height) / 2;
        const gradient = ctx.createRadialGradient(
            width / 2, height / 2, 0,
            width / 2, height / 2, outerRadius
        );

        // Calculate where the transparent part of the vignette ends
        const innerStop = Math.max(0, 1 - vignetteIntensity);

        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(innerStop, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, 'rgba(0,0,0,0.8)'); // Use slight transparency for a softer edge

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);
    }

    // 7. Return the final canvas element
    return canvas;
}