Mune Major Image Effect Generator

function processImage(
    originalImg,
    intensity = 1.0,
    colormap = "#040B16, #0A1C3C, #184675, #2F7BA8, #5BBAE6, #A6E3FA, #FFFFFF",
    bloomLevel = 0.65,
    blurSize = 0.03
) {
    // Determine canvas dimensions
    const width = originalImg.width;
    const height = originalImg.height;

    // Create the main canvas
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);
    
    let imgData;
    try {
        imgData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        // Prevent breaking if a cross-origin image is utilized without headers
        console.error("CORS error: Cannot access image data.", e);
        return canvas;
    }

    // Process the colormap input (converting string to array of hex colors)
    let colors = colormap.split(',').map(c => c.trim());
    if (colors.length === 0) colors = ["#000000", "#ffffff"];
    if (colors.length === 1) colors.push(colors[0]);

    // Create a 1D Look-Up Table (LUT) canvas to calculate our gradient map
    const lutCanvas = document.createElement('canvas');
    lutCanvas.width = 256;
    lutCanvas.height = 1;
    const lutCtx = lutCanvas.getContext('2d');
    const grad = lutCtx.createLinearGradient(0, 0, 256, 0);
    
    try {
        // Apply stops evenly across the gradient
        colors.forEach((col, i) => {
            grad.addColorStop(i / (colors.length - 1), col);
        });
    } catch (e) {
        // Fallback to simple black and white if invalid colors are passed
        grad.addColorStop(0, '#000000');
        grad.addColorStop(1, '#ffffff');
    }
    
    lutCtx.fillStyle = grad;
    lutCtx.fillRect(0, 0, 256, 1);
    const lutData = lutCtx.getImageData(0, 0, 256, 1).data;

    // Extract pixel data for mathematical modifications
    const data = imgData.data;
    const safeIntensity = Math.max(0, Math.min(1, Number(intensity) || 0));

    // Step 1: Map the Luminance of the image to the specific color palette (Mune Effect)
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i+1];
        const b = data[i+2];

        // Standard perceived luminance calculation
        const L = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
        
        // Grab mapped color from the generated Lookup Table
        const lutR = lutData[L * 4];
        const lutG = lutData[L * 4 + 1];
        const lutB = lutData[L * 4 + 2];

        // Interpolate between the original color and mapped color based on intensity
        data[i] = r + (lutR - r) * safeIntensity;
        data[i+1] = g + (lutG - g) * safeIntensity;
        data[i+2] = b + (lutB - b) * safeIntensity;
    }
    
    // Push the highly contrasted mapped data back into the canvas
    ctx.putImageData(imgData, 0, 0);

    // Step 2: Add ethereal bloom/glow (Major Effect)
    const safeBloom = Number(bloomLevel) || 0;
    if (safeBloom > 0) {
        const bloomCanvas = document.createElement('canvas');
        bloomCanvas.width = width;
        bloomCanvas.height = height;
        const bCtx = bloomCanvas.getContext('2d');
        
        // Blur intensity scales dynamically with image resolution
        const radius = Math.max(width, height) * (Number(blurSize) || 0.03);
        bCtx.filter = `blur(${radius}px)`;
        bCtx.drawImage(canvas, 0, 0);

        // Screen over the original image heavily to create an atmospheric, mystical glow
        ctx.globalCompositeOperation = 'screen';
        ctx.globalAlpha = Math.max(0, Math.min(1, safeBloom));
        ctx.drawImage(bloomCanvas, 0, 0);
        
        ctx.globalAlpha = 1.0;
        ctx.globalCompositeOperation = 'source-over';
    }

    return canvas;
}