Image Black And White TV Filter Effect Tool

function processImage(originalImg, scanLineIntensity = 0.15, noiseIntensity = 30, scanLineGap = 2) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure parameters are numbers and validate them
    let pScanLineIntensity = Number(scanLineIntensity);
    if (isNaN(pScanLineIntensity) || pScanLineIntensity < 0 || pScanLineIntensity > 1) {
        pScanLineIntensity = 0.15; // Default value if invalid
    }

    let pNoiseIntensity = Number(noiseIntensity);
    if (isNaN(pNoiseIntensity) || pNoiseIntensity < 0) {
        pNoiseIntensity = 30; // Default value if invalid
    }

    let pScanLineGap = Number(scanLineGap);
    if (isNaN(pScanLineGap) || pScanLineGap < 1) {
        pScanLineGap = 2; // Default value if invalid, minimum gap is 1
    }
    pScanLineGap = Math.floor(pScanLineGap); // Ensure it's an integer for modulo

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // If image dimensions are zero, return an empty canvas
    if (imgWidth === 0 || imgHeight === 0) {
        return canvas;
    }

    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data;

    const scanLineBrightnessFactor = 1 - pScanLineIntensity;

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i+1];
        const b = data[i+2];

        // Convert to grayscale using the luminosity method (more perceptually accurate)
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // Apply scan lines
        // Calculate current pixel's y coordinate
        const y = Math.floor((i / 4) / imgWidth); 
        if (pScanLineIntensity > 0 && pScanLineGap > 0 && y % pScanLineGap === 0) {
            gray *= scanLineBrightnessFactor;
        }

        // Apply noise
        if (pNoiseIntensity > 0) {
            const noise = (Math.random() - 0.5) * pNoiseIntensity;
            gray += noise;
        }

        // Clamp the gray value to ensure it's within the 0-255 range
        gray = Math.max(0, Math.min(255, gray));

        // Set R, G, B channels to the new gray value
        data[i] = gray;
        data[i+1] = gray;
        data[i+2] = gray;
        // Alpha channel (data[i+3]) remains unchanged
    }

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