Image Television Static Filter Effect Tool

function processImage(originalImg, staticIntensity = 0.2, scanlineIntensity = 0.1, scanlineSpacing = 3) {
    // Parameter validation and normalization
    // Ensure intensity values are between 0 and 1.
    const currentStaticIntensity = Math.max(0, Math.min(1, Number(staticIntensity)));
    const currentScanlineIntensity = Math.max(0, Math.min(1, Number(scanlineIntensity)));
    // Ensure scanlineSpacing is an integer and at least 1.
    const currentScanlineSpacing = Math.max(1, Math.floor(Number(scanlineSpacing)));

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure originalImg is an HTMLImageElement and has loaded with valid dimensions.
    // naturalWidth and naturalHeight are 0 if the image hasn't loaded or is broken.
    if (!(originalImg instanceof HTMLImageElement) || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        // console.warn("processImage: Invalid or unloaded image provided. Returning an empty 0x0 canvas.");
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    canvas.width = w;
    canvas.height = h;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Get image data to manipulate pixels.
    // This can throw a security error if the image is cross-origin and an appropriate
    // crossOrigin attribute is not set on the HTMLImageElement.
    // The caller is responsible for providing a usable image.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, w, h);
    } catch (e) {
        console.error("processImage: Could not get image data. This might be a cross-origin issue.", e);
        // Return the canvas with the original image drawn, without effects,
        // as pixel manipulation is not possible.
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray

    // Apply static noise effect
    if (currentStaticIntensity > 0) {
        for (let i = 0; i < data.length; i += 4) {
            // Add random noise to R, G, B channels
            // Math.random() - 0.5 gives a range of [-0.5, 0.5)
            // Multiply by 255 to scale to pixel value range for full intensity
            // Multiply by currentStaticIntensity to control the effect's strength
            const rNoise = (Math.random() - 0.5) * 255 * currentStaticIntensity;
            const gNoise = (Math.random() - 0.5) * 255 * currentStaticIntensity;
            const bNoise = (Math.random() - 0.5) * 255 * currentStaticIntensity;

            data[i]     += rNoise; // Red channel
            data[i + 1] += gNoise; // Green channel
            data[i + 2] += bNoise; // Blue channel
            // Alpha channel (data[i + 3]) remains unchanged.
            // Uint8ClampedArray automatically clamps values to the [0, 255] range upon assignment.
        }
    }

    // Apply scan lines effect
    if (currentScanlineIntensity > 0) { // currentScanlineSpacing is already >= 1
        for (let y = 0; y < h; y++) {
            // Apply scanline effect to every Nth row (N = currentScanlineSpacing)
            if (y % currentScanlineSpacing === 0) {
                for (let x = 0; x < w; x++) {
                    const index = (y * w + x) * 4;
                    // Reduce brightness of pixels on this scanline.
                    // (1 - currentScanlineIntensity) is a factor from 0 (results in black) to 1 (results in original color).
                    data[index]     *= (1 - currentScanlineIntensity); // Red
                    data[index + 1] *= (1 - currentScanlineIntensity); // Green
                    data[index + 2] *= (1 - currentScanlineIntensity); // Blue
                    // Alpha channel remains unchanged.
                }
            }
        }
    }

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

    return canvas;
}