Image Old Video Filter Effects Tool

/**
 * Applies an old video filter effect to an image, simulating the appearance of old film or CRT screens.
 * This includes sepia toning, noise, scan lines, a vignette effect, and random scratches.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} [noiseAmount=0.2] The intensity of the random noise/grain. Recommended range: 0 to 1.
 * @param {number} [scanlineIntensity=0.15] The visibility of the horizontal scan lines. Recommended range: 0 to 1.
 * @param {number} [vignetteIntensity=0.8] The strength of the dark vignette effect at the corners. Recommended range: 0 to 1.
 * @param {number} [scratchIntensity=0.1] The density of random vertical scratches on the image. Recommended range: 0 to 1.
 * @param {number} [sepiaIntensity=0.7] The strength of the sepia tone. 0 results in grayscale, 1 is full sepia.
 * @returns {HTMLCanvasElement} A new canvas element with the old video filter applied.
 */
function processImage(originalImg, noiseAmount = 0.2, scanlineIntensity = 0.15, vignetteIntensity = 0.8, scratchIntensity = 0.1, sepiaIntensity = 0.7) {
    // 1. Create canvas and get context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    canvas.width = width;
    canvas.height = height;

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

    // 3. Process image data for pixel-level effects
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

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

        // a. Apply Grayscale and Sepia Tone
        const gray = 0.299 * r + 0.587 * g + 0.114 * b; // Luminance-based grayscale
        const sepiaR = gray * 1.4;
        const sepiaG = gray * 1.1;
        const sepiaB = gray * 0.9;
        
        r = (1 - sepiaIntensity) * gray + sepiaIntensity * sepiaR;
        g = (1 - sepiaIntensity) * gray + sepiaIntensity * sepiaG;
        b = (1 - sepiaIntensity) * gray + sepiaIntensity * sepiaB;
        
        // b. Apply Noise
        const noise = (Math.random() - 0.5) * 255 * noiseAmount;
        r += noise;
        g += noise;
        b += noise;

        // c. Clamp 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));
    }

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

    // 5. Draw overlay effects on top of the processed image

    // a. Scan Lines
    if (scanlineIntensity > 0) {
        ctx.fillStyle = `rgba(0, 0, 0, ${scanlineIntensity})`;
        for (let y = 0; y < height; y += 3) {
            ctx.fillRect(0, y, width, 1.5);
        }
    }

    // b. Vignette
    if (vignetteIntensity > 0) {
        const centerX = width / 2;
        const centerY = height / 2;
        const outerRadius = Math.sqrt(centerX ** 2 + centerY ** 2);
        const innerRadius = outerRadius * 0.3;

        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,${vignetteIntensity})`);

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

    // c. Scratches
    if (scratchIntensity > 0) {
        const numScratches = Math.floor(width * scratchIntensity * 0.05);
        for (let i = 0; i < numScratches; i++) {
            const x = Math.random() * width;
            const thickness = Math.random() * 1.5 + 0.5;
            // 50/50 chance for a black or white scratch
            const colorVal = Math.random() > 0.5 ? 255 : 0;
            const opacity = Math.random() * 0.6 + 0.1;

            ctx.strokeStyle = `rgba(${colorVal}, ${colorVal}, ${colorVal}, ${opacity})`;
            ctx.lineWidth = thickness;
            ctx.beginPath();
            ctx.moveTo(x, 0);
            ctx.lineTo(x + (Math.random() - 0.5) * 20, height);
            ctx.stroke();
        }
    }

    // 6. Return the final canvas
    return canvas;
}