Image Security Camera Effect Creator

/**
 * Applies a security camera effect to an image.
 * This includes desaturation, adding noise, scanlines, a vignette,
 * and an information overlay with a camera ID and timestamp.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {string} [camId='CAM 01'] The ID of the camera to display.
 * @param {number} [showTimestamp=1] Set to 1 to show the timestamp, 0 to hide it.
 * @param {string} [textColor='#FFFF00'] The color of the overlay text (e.g., '#FFFF00' for yellow).
 * @param {number} [fontSize=16] The font size of the overlay text in pixels.
 * @param {number} [scanlinesOpacity=0.2] The opacity of the scanlines effect (0 to 1).
 * @param {number} [vignetteIntensity=0.7] The intensity of the vignette (dark corners) effect (0 to 1).
 * @param {number} [noiseIntensity=0.1] The intensity of the noise/grain effect (0 to 1).
 * @returns {HTMLCanvasElement} A new canvas element with the security camera effect applied.
 */
function processImage(
    originalImg,
    camId = 'CAM 01',
    showTimestamp = 1,
    textColor = '#FFFF00',
    fontSize = 16,
    scanlinesOpacity = 0.2,
    vignetteIntensity = 0.7,
    noiseIntensity = 0.1
) {
    // 1. Create a canvas and get its 2D context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use natural dimensions to get the original image size
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

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

    // 2. Apply initial filters and draw the image for a basic "CCTV" look
    // Desaturate and increase contrast
    ctx.filter = 'saturate(0.3) contrast(1.5)';
    ctx.drawImage(originalImg, 0, 0, w, h);
    // Reset the filter so it doesn't affect subsequent drawings
    ctx.filter = 'none';

    // 3. Add noise/grain effect
    if (noiseIntensity > 0) {
        const imageData = ctx.getImageData(0, 0, w, h);
        const data = imageData.data;
        // Clamp noiseIntensity to a safe range [0, 1]
        const clampedNoise = Math.min(Math.max(noiseIntensity, 0), 1);

        for (let i = 0; i < data.length; i += 4) {
            // Add monochromatic noise
            const noise = (Math.random() - 0.5) * 255 * clampedNoise;
            data[i] = Math.max(0, Math.min(255, data[i] + noise));
            data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + noise));
            data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + noise));
        }
        ctx.putImageData(imageData, 0, 0);
    }

    // 4. Add scanlines effect
    if (scanlinesOpacity > 0) {
        ctx.fillStyle = `rgba(0, 0, 0, ${scanlinesOpacity})`;
        for (let i = 0; i < h; i += 3) {
            ctx.fillRect(0, i, w, 1);
        }
    }

    // 5. Add vignette (darkened corners) effect
    if (vignetteIntensity > 0) {
        const centerX = w / 2;
        const centerY = h / 2;
        const startRadius = w * 0.1; // Start the fade closer to the center
        const outerRadius = Math.sqrt(centerX ** 2 + centerY ** 2);
        const gradient = ctx.createRadialGradient(centerX, centerY, startRadius, centerX, centerY, outerRadius);
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, `rgba(0,0,0,${vignetteIntensity})`);

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
    }

    // 6. Prepare and draw the text overlay
    let textToDisplay = camId;
    if (showTimestamp === 1) {
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        const timestamp = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        textToDisplay = `${camId}   ${timestamp}`;
    }

    if (textToDisplay.trim() !== '') {
        const font = `${fontSize}px 'Courier New', Courier, monospace`;
        ctx.font = font;
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top';

        // Use padding relative to font size for better scaling
        const padding = fontSize * 0.5;
        const textX = padding;
        const textY = padding;

        // Draw a subtle shadow for readability against any background
        ctx.fillStyle = 'rgba(0, 0, 0, 0.9)';
        ctx.fillText(textToDisplay, textX + 1, textY + 1);

        // Draw the main text
        ctx.fillStyle = textColor;
        ctx.fillText(textToDisplay, textX, textY);
    }

    // 7. Return the final canvas element
    return canvas;
}