Television Image Tool

function processImage(originalImg, scanlineIntensity = 0.25, noiseIntensity = 0.1, rgbShiftAmount = 4, vignetteIntensity = 0.7) {
    // Parse parameters to ensure they are numeric
    scanlineIntensity = Number(scanlineIntensity);
    noiseIntensity = Number(noiseIntensity);
    rgbShiftAmount = Math.round(Number(rgbShiftAmount));
    vignetteIntensity = Number(vignetteIntensity);

    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;
    
    // Create a copy of the original pixel data to sample from for the RGB shift
    const srcData = new Uint8ClampedArray(data);

    // Center coordinates for vignette effect
    const cx = width / 2;
    const cy = height / 2;
    const maxDist = Math.sqrt(cx * cx + cy * cy);

    // Pre-calculate scanline factors to save operations in the main loop
    const scanlineFactors = new Float32Array(height);
    for (let y = 0; y < height; y++) {
        scanlineFactors[y] = 1 - (scanlineIntensity * (0.5 + 0.5 * Math.sin(y * Math.PI * 0.5)));
    }

    for (let y = 0; y < height; y++) {
        const sl = scanlineFactors[y];
        const yOffset = y * width;
        const dy = y - cy;
        const dy2 = dy * dy;

        for (let x = 0; x < width; x++) {
            const i = (yOffset + x) * 4;

            // 1. Chromatic Aberration / RGB Shift effect
            const rX = Math.max(0, x - rgbShiftAmount);
            const bX = Math.min(width - 1, x + rgbShiftAmount);
            
            const rI = (yOffset + rX) * 4;
            const bI = (yOffset + bX) * 4;

            let r = srcData[rI];       // Shifted Red
            let g = srcData[i + 1];    // Normal Green
            let b = srcData[bI + 2];   // Shifted Blue

            // 2. TV Static / Noise effect
            if (noiseIntensity > 0) {
                const noise = (Math.random() * 2 - 1) * 255 * noiseIntensity;
                r += noise;
                g += noise;
                b += noise;
            }

            // 3. Scanline effect
            if (scanlineIntensity > 0) {
                r *= sl;
                g *= sl;
                b *= sl;
            }

            // 4. Vignette effect (darkened corners)
            if (vignetteIntensity > 0) {
                const dx = x - cx;
                const dist2 = dx * dx + dy2;
                const dist = Math.sqrt(dist2);
                
                // Quadratic falloff for vignette
                const vF = 1 - (vignetteIntensity * Math.pow(dist / maxDist, 2));

                r *= vF;
                g *= vF;
                b *= vF;
            }

            // Write modified colors back to the canvas data array
            data[i] = Math.min(255, Math.max(0, r));
            data[i + 1] = Math.min(255, Math.max(0, g));
            data[i + 2] = Math.min(255, Math.max(0, b));
            // Alpha (data[i + 3]) remains untouched from original imgData
        }
    }

    ctx.putImageData(imgData, 0, 0);
    return canvas;
}