G-Major 7 Image Effect Generator

function processImage(originalImg, mirrorMode = "horizontal", contrastLevel = "60", tintMode = "none", ghostingEffect = "true") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;

    // 1. Draw and Mirror Image (A staple of G-Major effects)
    if (mirrorMode === "horizontal") {
        // Left half mirrored to right
        ctx.drawImage(originalImg, 0, 0, w / 2, h, 0, 0, w / 2, h);
        ctx.save();
        ctx.translate(w, 0);
        ctx.scale(-1, 1);
        ctx.drawImage(originalImg, 0, 0, w / 2, h, w / 2, 0, w / 2, h);
        ctx.restore();
    } else if (mirrorMode === "vertical") {
        // Top half mirrored to bottom
        ctx.drawImage(originalImg, 0, 0, w, h / 2, 0, 0, w, h / 2);
        ctx.save();
        ctx.translate(0, h);
        ctx.scale(1, -1);
        ctx.drawImage(originalImg, 0, 0, w, h / 2, 0, h / 2, w, h / 2);
        ctx.restore();
    } else if (mirrorMode === "quad") {
        // Top-left quad mirrored to all 4 corners
        ctx.drawImage(originalImg, 0, 0, w / 2, h / 2, 0, 0, w / 2, h / 2);
        
        ctx.save();
        ctx.translate(w, 0); ctx.scale(-1, 1);
        ctx.drawImage(originalImg, 0, 0, w / 2, h / 2, w / 2, 0, w / 2, h / 2);
        ctx.restore();
        
        ctx.save();
        ctx.translate(0, h); ctx.scale(1, -1);
        ctx.drawImage(originalImg, 0, 0, w / 2, h / 2, 0, h / 2, w / 2, h / 2);
        ctx.restore();
        
        ctx.save();
        ctx.translate(w, h); ctx.scale(-1, -1);
        ctx.drawImage(originalImg, 0, 0, w / 2, h / 2, w / 2, h / 2, w / 2, h / 2);
        ctx.restore();
    } else {
        ctx.drawImage(originalImg, 0, 0, w, h);
    }

    // 2. Pixel Manipulation: Inversion, Contrast, and Tinting
    const imageData = ctx.getImageData(0, 0, w, h);
    const data = imageData.data;
    
    // Contrast formula factor
    const c = Number(contrastLevel);
    const factor = (259 * (c + 255)) / (255 * (259 - c));

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

        // Apply contrast
        r = factor * (r - 128) + 128;
        g = factor * (g - 128) + 128;
        b = factor * (b - 128) + 128;

        // Apply distinct eerie tints common in meme effects
        if (tintMode === "red") {
            r *= 1.5;
            g *= 0.5;
            b *= 0.5;
        } else if (tintMode === "blue") {
            r *= 0.5;
            g *= 0.5;
            b *= 1.5;
        } else if (tintMode === "yellow") {
            r *= 1.2;
            g *= 1.2;
            b *= 0.5;
        }

        // Clamp values and set back to buffer
        data[i] = Math.max(0, Math.min(255, r));
        data[i + 1] = Math.max(0, Math.min(255, g));
        data[i + 2] = Math.max(0, Math.min(255, b));
    }
    
    ctx.putImageData(imageData, 0, 0);

    // 3. Ghosting/Distortion Overlay (Creates the chaotic scary look)
    if (ghostingEffect === "true") {
        // Save the currently manipulated pixels to a temp canvas
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = w;
        tempCanvas.height = h;
        const tempCtx = tempCanvas.getContext('2d');
        tempCtx.putImageData(imageData, 0, 0);

        ctx.save();
        ctx.globalAlpha = 0.35;
        ctx.globalCompositeOperation = "screen";
        
        // Scale layer 1
        ctx.translate(w / 2, h / 2);
        ctx.scale(1.12, 1.12);
        ctx.translate(-w / 2, -h / 2);
        ctx.drawImage(tempCanvas, 0, 0);

        // Scale & Rotate layer 2 
        ctx.translate(w / 2, h / 2);
        ctx.scale(1.05, 1.05);
        ctx.rotate(0.03); 
        ctx.translate(-w / 2, -h / 2);
        ctx.drawImage(tempCanvas, 0, 0);
        
        ctx.restore();
    }

    return canvas;
}