Image Static TV Error Simulator

/**
 * Simulates a static TV error effect on an image.
 * This function adds noise, scanlines, and horizontal "glitch" displacements to the image.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} noiseAmount The intensity of the random pixel noise. Recommended range: 0 to 100. Default is 50.
 * @param {number} scanlineIntensity The darkness of the scanlines. A value from 0 (no lines) to 1 (black lines). Default is 0.1.
 * @param {number} glitchIntensity The number of "glitch" slices to generate. Recommended range: 0 to 50. Default is 15.
 * @param {string} isGreyscale A string 'true' or 'false' to determine if the image should be converted to greyscale first. Default is 'false'.
 * @returns {HTMLCanvasElement} A new canvas element with the TV error effect applied.
 */
function processImage(originalImg, noiseAmount = 50, scanlineIntensity = 0.1, glitchIntensity = 15, isGreyscale = 'false') {
    // 1. Parameter sanitization
    const noise = Number(noiseAmount);
    const scanlines = Math.max(0, Math.min(1, Number(scanlineIntensity)));
    const glitches = Number(glitchIntensity);
    const greyscale = isGreyscale === 'true';

    // 2. Canvas setup
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // 3. Draw original image
    ctx.drawImage(originalImg, 0, 0);

    // 4. Get pixel data
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // 5. Pixel manipulation loop for noise and scanlines
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // Greyscale effect
        if (greyscale) {
            const avg = 0.299 * r + 0.587 * g + 0.114 * b;
            r = g = b = avg;
        }

        // Noise effect
        const randomNoise = (Math.random() - 0.5) * noise;
        r += randomNoise;
        g += randomNoise;
        b += randomNoise;

        // Scanline effect
        const y = Math.floor((i / 4) / width);
        if (y % 3 === 0) { // Apply to every 3rd line
            const factor = 1.0 - scanlines;
            r *= factor;
            g *= factor;
            b *= factor;
        }

        // Update pixel data (Uint8ClampedArray handles clamping between 0 and 255)
        data[i] = r;
        data[i + 1] = g;
        data[i + 2] = b;
    }

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

    // 7. Glitch effect: draws shifted slices of the canvas back on top
    for (let i = 0; i < glitches; i++) {
        const startY = Math.random() * height;
        const sliceHeight = Math.random() * 20 + 1; //Slice height between 1 and 21 pixels
        const scrollAmount = (Math.random() - 0.5) * (width * 0.1); // Shift up to 10% of canvas width

        // Using a try-catch block as getImageData can throw an error if the slice is outside the canvas bounds
        try {
            const sliceData = ctx.getImageData(0, startY, width, sliceHeight);
            ctx.clearRect(0, startY, width, sliceHeight);
            ctx.putImageData(sliceData, scrollAmount, startY);
        } catch (e) {
            // Ignore errors that might happen at the very edges of the canvas
        }
    }

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