Ni Hao Kai Lan Major 9 Image Effect Generator

function processImage(originalImg, effectLevel = "100") {
    // Create canvas to draw the effect
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    
    const ctx = canvas.getContext('2d');
    const intensity = parseFloat(effectLevel) / 100;
    
    // "Major 9" effect commonly refers to YTP/G-Major style video edits 
    // often featuring a 3x3 grid (9 sections), color inversions, and hue shifts.
    const cols = 3;
    const rows = 3;
    const tileW = width / cols;
    const tileH = height / rows;
    
    // Disable smoothing for a slightly harsher, classic meme aesthetic if scaled heavily
    ctx.imageSmoothingEnabled = true;

    for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
            const index = row * cols + col;
            ctx.save();
            
            // Move to the center of the current tile
            const centerX = col * tileW + tileW / 2;
            const centerY = row * tileH + tileH / 2;
            ctx.translate(centerX, centerY);
            
            // Apply different effects based on the tile index
            if (index === 4) {
                // Keep the center tile mostly normal but boost saturation/contrast
                ctx.filter = `contrast(${1 + intensity * 0.5}) saturate(${1 + intensity})`;
            } else {
                // Apply classic "Major" meme effects: heavy hue shifting and alternate inversion
                const hue = (index * 45) + (intensity * 60);
                const invertAmount = (index % 2 === 0) ? Math.round(100 * intensity) : 0;
                ctx.filter = `hue-rotate(${hue}deg) invert(${invertAmount}%) contrast(${1 + intensity})`;
                
                // Add mirroring effect to outer tiles for a chaotic kaleidoscope look
                const flipX = (col % 2 !== 0) ? -1 : 1;
                const flipY = (row % 2 !== 0) ? -1 : 1;
                ctx.scale(flipX, flipY);
            }
            
            // Draw the tile
            ctx.drawImage(originalImg, -tileW / 2, -tileH / 2, tileW, tileH);
            
            ctx.restore();
        }
    }
    
    return canvas;
}