Midnight Magic Image Tool

function processImage(originalImg, intensity = "0.8", glowAmount = "0.6") {
    // Parse parameters
    const intensityNum = Math.max(0, Math.min(1, parseFloat(intensity) || 0.8));
    const glowNum = Math.max(0, Math.min(1, parseFloat(glowAmount) || 0.6));

    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);

    // Step 1: Apply Midnight Color Transformation
    // We'll shift colors toward deep blues, reduce greens/reds, and boost magical highlights
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i] / 255;
        let g = data[i + 1] / 255;
        let b = data[i + 2] / 255;

        // Base midnight transformation
        let r_mid = r * r * 0.5; // Darken and reduce red significantly
        let g_mid = g * g * 0.7; // Darken and reduce green
        // Deepen and slightly boost blue, retaining details
        let b_mid = b * 0.4 + Math.sqrt(b) * 0.6 + 0.05; 

        // Calculate luminance to add "magical" purple/pink tint to highlights
        let lum = 0.299 * r + 0.587 * g + 0.114 * b;
        if (lum > 0.5) {
            let highlightSpill = (lum - 0.5) * 2;
            r_mid += highlightSpill * 0.4; // Introduce magenta/purple to highlights
            b_mid += highlightSpill * 0.4;
        }

        // Clamp values
        r_mid = Math.max(0, Math.min(1, r_mid));
        g_mid = Math.max(0, Math.min(1, g_mid));
        b_mid = Math.max(0, Math.min(1, b_mid));

        // Blend with original pixel based on intensity factor
        data[i] = Math.round((r * (1 - intensityNum) + r_mid * intensityNum) * 255);
        data[i + 1] = Math.round((g * (1 - intensityNum) + g_mid * intensityNum) * 255);
        data[i + 2] = Math.round((b * (1 - intensityNum) + b_mid * intensityNum) * 255);
    }
    // Update canvas with newly processed colors
    ctx.putImageData(imageData, 0, 0);

    // Step 2: Midnight Magical Glow (Bloom effect)
    if (glowNum > 0) {
        const glowCanvas = document.createElement('canvas');
        glowCanvas.width = width;
        glowCanvas.height = height;
        const glowCtx = glowCanvas.getContext('2d');

        // Draw the color-shifted image to an off-screen canvas
        glowCtx.drawImage(canvas, 0, 0);

        ctx.save();
        ctx.globalCompositeOperation = 'screen';
        
        // Scale blur radius based on image size to maintain effect consistency
        const blurRadius = Math.max(width, height) * 0.015 * glowNum;
        ctx.filter = `blur(${blurRadius}px) brightness(1.2) contrast(1.3) saturate(1.2)`;
        ctx.globalAlpha = glowNum * 0.85; 
        
        // Blend glow layer over the main image
        ctx.drawImage(glowCanvas, 0, 0);
        ctx.restore();
    }

    // Step 3: Add Midnight Vignette (darkened edges)
    ctx.save();
    ctx.globalCompositeOperation = 'multiply';
    const cx = width / 2;
    const cy = height / 2;
    const maxRadius = Math.max(cx, cy) * 1.3;
    
    const gradient = ctx.createRadialGradient(cx, cy, maxRadius * 0.3, cx, cy, maxRadius);
    gradient.addColorStop(0, 'rgba(10, 15, 30, 0)');
    gradient.addColorStop(0.6, `rgba(5, 5, 20, ${0.5 * intensityNum})`);
    gradient.addColorStop(1, `rgba(0, 0, 10, ${1.0 * intensityNum})`);
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);
    ctx.restore();

    // Step 4: Add Magical Stardust / Sparks
    if (intensityNum > 0) {
        ctx.save();
        ctx.globalCompositeOperation = 'screen';
        
        // Number of stars scaled by image area and intensity
        const numStars = (width * height) * 0.0001 * intensityNum;
        
        for (let i = 0; i < numStars; i++) {
            let sx = Math.random() * width;
            let sy = Math.random() * height;
            let sr = Math.random() * 1.5 + 0.5;
            
            // Randomly tint some stars slightly blue or purple
            let starColorType = Math.random();
            if (starColorType > 0.8) {
                ctx.fillStyle = 'rgba(180, 200, 255, 0.9)'; // Blueish
            } else if (starColorType > 0.6) {
                ctx.fillStyle = 'rgba(230, 180, 255, 0.9)'; // Purplish
            } else {
                ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'; // White
            }

            // Draw star core
            ctx.beginPath();
            ctx.arc(sx, sy, sr, 0, Math.PI * 2);
            ctx.fill();
            
            // Draw a subtle lens flare cross on some larger stars
            if (Math.random() > 0.7) {
                ctx.fillStyle = ctx.fillStyle.replace('0.9', '0.5'); // lower opacity for flare
                ctx.fillRect(sx - sr * 3, sy - sr * 0.3, sr * 6, sr * 0.6); // Horizontal
                ctx.fillRect(sx - sr * 0.3, sy - sr * 3, sr * 0.6, sr * 6); // Vertical
            }
        }
        ctx.restore();
    }

    return canvas;
}