I Hate Major Image Effect Generator

function processImage(originalImg, effectMode = "g-major", mirrorType = "none", topText = "I HATE", bottomText = "MAJOR") {
    // Create the canvas element to output
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set output dimensions to match the original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // Draw the image onto the canvas with optional meme mirroring (common in "Major" effects)
    if (mirrorType === "horizontal") {
        // Draw left half normal
        ctx.drawImage(originalImg, 0, 0, canvas.width / 2, canvas.height, 0, 0, canvas.width / 2, canvas.height);
        // Draw left half flipped horizontally on the right side
        ctx.save();
        ctx.translate(canvas.width, 0);
        ctx.scale(-1, 1);
        ctx.drawImage(originalImg, 0, 0, canvas.width / 2, canvas.height, 0, 0, canvas.width / 2, canvas.height);
        ctx.restore();
    } else if (mirrorType === "vertical") {
        // Draw top half normal
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height / 2, 0, 0, canvas.width, canvas.height / 2);
        // Draw top half flipped vertically on the bottom side
        ctx.save();
        ctx.translate(0, canvas.height);
        ctx.scale(1, -1);
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height / 2, 0, 0, canvas.width, canvas.height / 2);
        ctx.restore();
    } else {
        // Default standard draw
        ctx.drawImage(originalImg, 0, 0);
    }

    // Apply pixel/color manipulation for the "Major" image effects
    if (effectMode !== "none") {
        const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imgData.data;

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

            if (effectMode === "g-major" || effectMode === "major") {
                // Highly recognizable "Major" audiovisual distortion meme: Invert colors + Red tint
                r = 255 - r;
                g = 255 - g;
                b = 255 - b;
                
                data[i] = Math.min(255, r * 1.5 + 40); // Boost Red
                data[i + 1] = g * 0.3;                 // Dim Green
                data[i + 2] = b * 0.3;                 // Dim Blue

            } else if (effectMode === "i-hate-you") {
                // High contrast red filter
                const avg = (r + g + b) / 3;
                const contrast = avg > 110 ? 255 : 0;
                
                data[i] = contrast === 255 ? Math.min(255, r + 150) : 50; 
                data[i + 1] = 0;
                data[i + 2] = 0;

            } else if (effectMode === "invert") {
                // Standard color inversion
                data[i] = 255 - r;
                data[i + 1] = 255 - g;
                data[i + 2] = 255 - b;
            }
        }
        ctx.putImageData(imgData, 0, 0);
    }

    // Add meme-style text overlay
    const drawMemeText = (text, isTop) => {
        if (!text) return;
        const textStr = String(text).toUpperCase();
        
        // Auto-scale font size based on image width
        const fontSize = Math.max(20, Math.floor(canvas.width / 8)); 
        ctx.font = `bold ${fontSize}px Impact, sans-serif`;
        ctx.textAlign = "center";
        
        // Handling word wrap
        const words = textStr.split(' ');
        let line = '';
        const lines = [];
        
        for (let n = 0; n < words.length; n++) {
            let testLine = line + words[n] + ' ';
            let metrics = ctx.measureText(testLine);
            if (metrics.width > canvas.width * 0.95 && n > 0) {
                lines.push(line.trim());
                line = words[n] + ' ';
            } else {
                line = testLine;
            }
        }
        lines.push(line.trim());
        
        // Setup stroke and fill colors for classic meme text
        ctx.lineWidth = Math.max(3, Math.floor(fontSize / 15));
        ctx.strokeStyle = "black";
        ctx.fillStyle = "white";

        if (isTop) {
            ctx.textBaseline = "top";
            lines.forEach((l, i) => {
                let pY = 10 + (i * fontSize);
                ctx.strokeText(l, canvas.width / 2, pY);
                ctx.fillText(l, canvas.width / 2, pY);
            });
        } else {
            ctx.textBaseline = "bottom";
            let reversedLines = lines.slice().reverse();
            reversedLines.forEach((l, i) => {
                let pY = canvas.height - 10 - (i * fontSize);
                ctx.strokeText(l, canvas.width / 2, pY);
                ctx.fillText(l, canvas.width / 2, pY);
            });
        }
    };

    drawMemeText(topText, true);
    drawMemeText(bottomText, false);

    return canvas;
}