Image Old Color Video Filter With Artifacts And Effects

/**
 * Applies an old color video filter to an image, complete with artifacts
 * like noise, scanlines, and a vignette effect.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} sepiaIntensity The intensity of the sepia tone (0 to 1). Default is 0.6.
 * @param {number} noiseAmount The amount of random noise/grain to add (0 to 1). Default is 0.1.
 * @param {number} scanlineOpacity The opacity of the horizontal scanlines (0 to 1). Default is 0.1.
 * @param {number} vignetteIntensity The intensity of the dark vignette effect at the corners (0 to 1). Default is 0.7.
 * @param {number} saturation The color saturation level (e.g., 0 is grayscale, 1 is original). Default is 0.8.
 * @returns {HTMLCanvasElement} A new canvas element with the applied effects.
 */
function processImage(originalImg, sepiaIntensity = 0.6, noiseAmount = 0.1, scanlineOpacity = 0.1, vignetteIntensity = 0.7, saturation = 0.8) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    // Step 1: Apply base color filters using the fast CSS-like filter property
    // This gives the image its base desaturated, sepia, old-film look.
    ctx.filter = `sepia(${sepiaIntensity}) saturate(${saturation}) contrast(1.1) brightness(0.95)`;
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    // Reset filter so it doesn't affect subsequent drawing operations
    ctx.filter = 'none';

    // Step 2: Add noise for a grainy, artifact-like texture
    if (noiseAmount > 0) {
        const imageData = ctx.getImageData(0, 0, width, height);
        const data = imageData.data;
        // Iterate over each pixel (4 values: R, G, B, A)
        for (let i = 0; i < data.length; i += 4) {
            // Generate a random grayscale noise value
            const noise = (Math.random() - 0.5) * 255 * noiseAmount;
            // Add noise to R, G, and B channels and clamp the values
            data[i] = Math.max(0, Math.min(255, data[i] + noise));
            data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + noise));
            data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + noise));
        }
        ctx.putImageData(imageData, 0, 0);
    }

    // Step 3: Overlay scanlines to mimic an old CRT display
    if (scanlineOpacity > 0) {
        ctx.fillStyle = `rgba(0, 0, 0, ${scanlineOpacity})`;
        // Draw a 1px tall line every 3 pixels
        for (let y = 0; y < height; y += 3) {
            ctx.fillRect(0, y, width, 1);
        }
    }

    // Step 4: Add a vignette effect to darken the corners
    if (vignetteIntensity > 0) {
        // Calculate the radius to the farthest corner
        const outerRadius = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
        const gradient = ctx.createRadialGradient(
            width / 2, height / 2, height / 3, // Inner circle
            width / 2, height / 2, outerRadius // Outer circle
        );
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, `rgba(0,0,0,${vignetteIntensity})`);
        
        ctx.fillStyle = gradient;
        ctx.globalCompositeOperation = 'source-over'; // Ensure it draws on top
        ctx.fillRect(0, 0, width, height);
    }

    return canvas;
}