Image Poor Analog Television Reception Filter

/**
 * Applies a poor analog television reception filter (including ghosting) to an image.
 * This function simulates effects like ghosting, signal noise, scanlines, and color desaturation
 * common to old CRT televisions with a weak analog signal.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} ghostOffset The horizontal pixel offset for the ghosting effect. A larger value creates a more pronounced ghost. Defaults to 5.
 * @param {number} ghostOpacity The opacity of the ghost image, from 0.0 (transparent) to 1.0 (opaque). Defaults to 0.2.
 * @param {number} noiseAmount The intensity of the random 'snow' or noise effect. Should be a value between 0 and 255. Defaults to 30.
 * @param {number} scanlineOpacity The opacity of the horizontal scanlines, from 0.0 (transparent) to 1.0 (opaque). Defaults to 0.1.
 * @param {number} desaturationAmount The amount to desaturate the image colors, from 0.0 (original colors) to 1.0 (grayscale). Defaults to 0.3.
 * @returns {HTMLCanvasElement} A new canvas element with the TV filter applied.
 */
function processImage(
    originalImg,
    ghostOffset = 5,
    ghostOpacity = 0.2,
    noiseAmount = 30,
    scanlineOpacity = 0.1,
    desaturationAmount = 0.3
) {
    // Create a canvas and get its 2D rendering context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;

    // --- Step 1: Apply Ghosting ---
    // Draw the main image
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Draw a semi-transparent, shifted version of the image for the ghosting effect
    if (ghostOffset > 0 && ghostOpacity > 0) {
        ctx.globalAlpha = Math.max(0, Math.min(1, ghostOpacity));
        ctx.drawImage(originalImg, ghostOffset, 0, w, h);
        ctx.globalAlpha = 1.0; // Reset alpha for subsequent operations
    }

    // --- Step 2: Pixel-level manipulation (Noise, Scanlines, Desaturation) ---
    const imageData = ctx.getImageData(0, 0, w, h);
    const data = imageData.data;

    // Iterate over each pixel in the image data array
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // Apply desaturation
        const sat = Math.max(0, Math.min(1, desaturationAmount));
        if (sat > 0) {
            // Calculate luminance using the standard formula
            const gray = 0.299 * r + 0.587 * g + 0.114 * b;
            // Linearly interpolate between the original color and its grayscale version
            r = r + (gray - r) * sat;
            g = g + (gray - g) * sat;
            b = b + (gray - b) * sat;
        }

        // Apply noise
        if (noiseAmount > 0) {
            // Generate a random value and add it to each color channel
            const noise = (Math.random() - 0.5) * noiseAmount;
            r += noise;
            g += noise;
            b += noise;
        }

        // Apply scanlines
        const lineOpacity = Math.max(0, Math.min(1, scanlineOpacity));
        if (lineOpacity > 0) {
            // Get the current row (y-coordinate)
            const y = Math.floor((i / 4) / w);
            // Darken pixels on every other row to create a scanline effect
            if (y % 2 === 0) {
                const factor = 1.0 - lineOpacity;
                r *= factor;
                g *= factor;
                b *= factor;
            }
        }

        // Clamp the final R, G, B values to the valid 0-255 range
        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));
    }

    // --- Step 3: Finalize ---
    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // Return the canvas element
    return canvas;
}