Photo Holographic Filter Application

/**
 * Applies a holographic filter effect to an image.
 * This effect includes a rainbow color overlay, scanlines, and a glitch effect.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} strength A number between 0 and 1 to control the intensity of the color overlay. Default is 0.5.
 * @param {string} blendMode The blend mode for the color overlay. 'color-dodge', 'overlay', 'screen', 'lighter' are good options. Default is 'color-dodge'.
 * @param {number} scanlineOpacity A number between 0 and 1 for the opacity of the scanlines. Default is 0.1.
 * @param {number} glitchIntensity A number controlling the amount of glitching. Higher is more intense. Recommended 0-50. Default is 10.
 * @returns {HTMLCanvasElement} A new canvas element with the holographic filter applied.
 */
function processImage(originalImg, strength = 0.5, blendMode = 'color-dodge', scanlineOpacity = 0.1, glitchIntensity = 10) {
    // 1. Create a canvas and get its 2D rendering context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

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

    // 3. Apply the holographic color overlay
    // Set the blending mode for the color overlay
    ctx.globalCompositeOperation = blendMode;

    // Create a vibrant, multi-stop linear gradient for the iridescent effect
    const gradient = ctx.createLinearGradient(0, 0, w, h);
    const validatedStrength = Math.max(0, Math.min(1, strength)); // Clamp strength between 0 and 1
    gradient.addColorStop(0, `rgba(0, 255, 255, ${validatedStrength})`); // Cyan
    gradient.addColorStop(0.25, `rgba(255, 0, 255, ${validatedStrength})`); // Magenta
    gradient.addColorStop(0.5, `rgba(255, 255, 0, ${validatedStrength})`); // Yellow
    gradient.addColorStop(0.75, `rgba(0, 255, 0, ${validatedStrength})`); // Green
    gradient.addColorStop(1, `rgba(0, 0, 255, ${validatedStrength})`); // Blue

    // Fill the entire canvas with the gradient, blending it with the image below
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, w, h);

    // Reset composite operation to the default for subsequent drawing
    ctx.globalCompositeOperation = 'source-over';

    // 4. Add a glitch effect for a more digital/distorted look
    const maxGlitches = Math.floor(Math.max(0, Math.min(50, glitchIntensity)));
    for (let i = 0; i < maxGlitches; i++) {
        const y = Math.random() * h;
        // Determine a random height for the glitch slice
        const sliceHeight = 1 + Math.random() * (h / 15);
        // Ensure the slice does not go past the bottom of the canvas
        const effectiveSliceHeight = Math.min(sliceHeight, h - y);
        // Determine a random horizontal offset for the slice
        const xOffset = (Math.random() - 0.5) * (w / 15);

        if (effectiveSliceHeight > 0) {
            // Draw a slice of the current canvas back onto itself, but shifted horizontally
            ctx.drawImage(canvas,
                0, y, w, effectiveSliceHeight, // Source rectangle
                xOffset, y, w, effectiveSliceHeight  // Destination rectangle
            );
        }
    }

    // 5. Add scanlines to simulate a CRT display
    const validatedScanlineOpacity = Math.max(0, Math.min(1, scanlineOpacity));
    if (validatedScanlineOpacity > 0) {
        ctx.fillStyle = `rgba(255, 255, 255, ${validatedScanlineOpacity})`;
        for (let y = 0; y < h; y += 3) {
            ctx.fillRect(0, y, w, 1);
        }
    }

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