Image Transparent Hologram Effect Generator

function processImage(originalImg, hologramColor = '#00FFFF', scanLineOpacity = 0.2, scanLineHeight = 4, glowIntensity = 20) {
    // Sanitize and validate input parameters to ensure they are within expected types and ranges
    const color = typeof hologramColor === 'string' ? hologramColor : '#00FFFF';
    const opacity = Math.max(0, Math.min(1, Number(scanLineOpacity) || 0));
    const lineHeight = Math.max(1, Number(scanLineHeight) || 4);
    const glow = Math.max(0, Number(glowIntensity) || 0);

    // Create the final canvas and its 2D rendering context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set the canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // A temporary canvas is used to process the image data without affecting the final canvas directly yet
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = canvas.width;
    tempCanvas.height = canvas.height;
    
    // Draw the original image onto the temporary canvas to access its pixel data
    tempCtx.drawImage(originalImg, 0, 0);

    // Get the pixel data from the temporary canvas
    const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
    const data = imageData.data;

    // Parse the hologram color from a hex string (e.g., #00FFFF) into its RGB components
    let holoR = 0, holoG = 255, holoB = 255; // Default to cyan
    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(color)) {
        let c = color.substring(1);
        // Handle 3-digit hex codes by duplicating characters (e.g., #03F -> #0033FF)
        if (c.length === 3) {
            c = c.split('').map(char => char + char).join('');
        }
        holoR = parseInt(c.substring(0, 2), 16);
        holoG = parseInt(c.substring(2, 4), 16);
        holoB = parseInt(c.substring(4, 6), 16);
    }

    // Iterate over each pixel in the image data array (each pixel consists of 4 values: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        // If the original pixel is fully transparent, we leave it as is
        if (data[i + 3] === 0) {
            continue;
        }

        // Calculate the grayscale brightness (luminance) of the pixel
        const brightness = (0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]);

        // Set the pixel's color to the specified hologram color
        data[i] = holoR;
        data[i + 1] = holoG;
        data[i + 2] = holoB;
        
        // Set the pixel's alpha (transparency) based on its original brightness.
        // This makes darker areas more transparent, creating the characteristic transparent hologram look.
        data[i + 3] = brightness;
    }

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

    // Clear the main canvas before drawing the final result with effects
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Apply a glow effect using CSS-like filters. Stacking multiple drop-shadows creates a richer bloom.
    if (glow > 0) {
        ctx.filter = `blur(0.5px) drop-shadow(0 0 ${glow}px ${color}) drop-shadow(0 0 ${glow / 2}px ${color})`;
    }
    
    // Draw the processed image from the temp canvas onto the main canvas.
    // The filter defined above will be applied during this drawing operation.
    ctx.drawImage(tempCanvas, 0, 0);

    // Reset the filter so it doesn't affect subsequent drawing operations like the scan lines.
    ctx.filter = 'none';

    // Draw horizontal scan lines over the top of the glowing hologram image
    if (opacity > 0) {
        for (let y = 0; y < canvas.height; y += lineHeight) {
            // Use a dark, semi-transparent color for the scan lines
            ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`;
            // Draw a thin rectangle for each line
            ctx.fillRect(0, y, canvas.width, Math.max(1, lineHeight / 2));
        }
    }

    return canvas;
}