Nonoko Major Image Effect Generator

async function processImage(originalImg, preset = "cinematic", textOverlay = "NONOKO MAJOR", textPosition = "bottom") {
    // Attempt to dynamically load a bold, impactful font for the effect
    const fontName = 'Oswald';
    const fontUrl = 'https://fonts.gstatic.com/s/oswald/v49/TK3iWkUHHAIjg752GT8G.woff2';
    try {
        const font = new FontFace(fontName, `url(${fontUrl})`);
        await font.load();
        document.fonts.add(font);
    } catch (e) {
        console.warn('Could not load custom font, falling back to web-safe fonts.', e);
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = originalImg.width;
    const height = originalImg.height;
    
    canvas.width = width;
    canvas.height = height;

    // Apply primary effect presets using Canvas 2D filters
    switch (preset.toLowerCase()) {
        case "vintage":
            ctx.filter = "sepia(80%) contrast(120%) brightness(90%) saturate(150%)";
            break;
        case "cinematic":
            ctx.filter = "contrast(140%) saturate(85%) brightness(85%)";
            break;
        case "popart":
            ctx.filter = "saturate(300%) contrast(150%) hue-rotate(15deg)";
            break;
        case "dreamy":
            ctx.filter = "blur(2px) saturate(120%) brightness(120%) contrast(90%)";
            break;
        case "glitch":
            ctx.filter = "hue-rotate(90deg) saturate(200%) invert(20%)";
            break;
        default:
            ctx.filter = "contrast(120%) saturate(120%)";
    }

    // Draw the image with the applied filter
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    // Draw a vignette for dramatic emphasis
    ctx.filter = "none";
    const gradient = ctx.createRadialGradient(
        width / 2, height / 2, Math.min(width, height) * 0.3, 
        width / 2, height / 2, Math.min(width, height) * 0.95
    );
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(1, 'rgba(0,0,0,0.8)');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);

    // Add glitch distortion effect if selected
    if (preset.toLowerCase() === "glitch") {
        ctx.globalCompositeOperation = "exclusion";
        const offset = Math.max(5, width * 0.015);
        ctx.fillStyle = "rgba(0, 255, 255, 0.4)";
        ctx.fillRect(0, 0, width, height);
        ctx.drawImage(originalImg, -offset, 0, width, height);
        ctx.fillStyle = "rgba(255, 0, 0, 0.4)";
        ctx.fillRect(0, 0, width, height);
        ctx.drawImage(originalImg, offset, 0, width, height);
        ctx.globalCompositeOperation = "source-over";
    }

    // Draw the bold title / text overlay
    if (textOverlay) {
        ctx.fillStyle = "#ffffff";
        ctx.shadowColor = "rgba(0, 0, 0, 0.9)";
        ctx.shadowBlur = width * 0.01;
        ctx.shadowOffsetX = width * 0.005;
        ctx.shadowOffsetY = width * 0.005;
        
        const fontSize = Math.floor(Math.min(width, height) * 0.12);
        ctx.font = `600 ${fontSize}px "${fontName}", Impact, Arial Black, sans-serif`;
        ctx.textAlign = "center";
        
        let yPos;
        switch(textPosition.toLowerCase()) {
            case "top":
                ctx.textBaseline = "top";
                yPos = fontSize * 0.3;
                break;
            case "center":
                ctx.textBaseline = "middle";
                yPos = height / 2;
                break;
            case "bottom":
            default:
                ctx.textBaseline = "bottom";
                yPos = height - (fontSize * 0.3);
                break;
        }

        // Fill text and add outline definition 
        ctx.fillText(textOverlay, width / 2, yPos);
        
        ctx.lineWidth = Math.max(2, fontSize * 0.02);
        ctx.strokeStyle = "#000000";
        ctx.strokeText(textOverlay, width / 2, yPos);
    }

    return canvas;
}