Pixel Soften Video Filter Tool

function processImage(originalImg, softness = 4, glowIntensity = 0.3, rgbPixelShift = 1, scanlinesOpacity = 0.05) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;

    // Parse parameters to ensure they are numeric, applying defaults on failure
    const _softness = isNaN(parseFloat(softness)) ? 4 : parseFloat(softness);
    const _glow = isNaN(parseFloat(glowIntensity)) ? 0.3 : parseFloat(glowIntensity);
    const _shift = isNaN(parseInt(rgbPixelShift, 10)) ? 1 : parseInt(rgbPixelShift, 10);
    const _scanlines = isNaN(parseFloat(scanlinesOpacity)) ? 0.05 : parseFloat(scanlinesOpacity);

    // 1. Draw base original image
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 2. Apply "Pixel Soften Video" Bloom/Glow effect
    // This utilizes a screen blend with blurred overlay to create a soft video light diffusion
    if (_softness > 0 && _glow > 0) {
        ctx.globalAlpha = _glow;
        ctx.globalCompositeOperation = 'screen';
        ctx.filter = `blur(${_softness}px)`;
        ctx.drawImage(originalImg, 0, 0, w, h);
    }

    // Reset context to default properties
    ctx.globalAlpha = 1.0;
    ctx.globalCompositeOperation = 'source-over';
    ctx.filter = 'none';

    // 3. Apply "Video" Tracking Shift effect (Subtle Chromatic Aberration)
    if (_shift !== 0) {
        const imgData = ctx.getImageData(0, 0, w, h);
        const data = imgData.data;
        const newImgData = ctx.createImageData(w, h);
        const outData = newImgData.data;

        for (let y = 0; y < h; y++) {
            for (let x = 0; x < w; x++) {
                const idx = (y * w + x) * 4;
                
                // R channel shifted slightly to create the VHS bleed
                let rX = x - _shift;
                rX = rX < 0 ? 0 : (rX >= w ? w - 1 : rX);
                outData[idx] = data[(y * w + rX) * 4];
                
                // G channel stays centered
                outData[idx + 1] = data[idx + 1];
                
                // B channel shifted in the opposite direction
                let bX = x + _shift;
                bX = bX < 0 ? 0 : (bX >= w ? w - 1 : bX);
                outData[idx + 2] = data[(y * w + bX) * 4 + 2];
                
                // Alpha stays intact
                outData[idx + 3] = data[idx + 3];
            }
        }
        ctx.putImageData(newImgData, 0, 0);
    }

    // 4. Apply Vintage TV/Video Scanlines over the softened image
    if (_scanlines > 0) {
        ctx.fillStyle = `rgba(0, 0, 0, ${_scanlines})`;
        for (let y = 0; y < h; y += 2) {
            ctx.fillRect(0, y, w, 1);
        }
    }

    return canvas;
}