Image Prank Generator Tool

/**
 * Image Prank Generator Tool ("Король розыгрышей")
 * Generates an image with a prank overlay.
 * 
 * @param {HTMLImageElement} originalImg - The source image
 * @param {string} prankType - Select the prank: 'play_button', 'sensitive_content', 'cracked_screen', 'fake_cursor', 'fake_loading'
 * @param {string} customText - Optional custom text (used for 'sensitive_content' mode)
 * @returns {HTMLCanvasElement} - The modified canvas containing the prank image
 */
function processImage(originalImg, prankType = "play_button", customText = "Sensitive Content") {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;

    // Helper: Draw a rounded rectangle for UI elements
    const drawRoundRect = (x, y, width, height, radius) => {
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        ctx.lineTo(x + radius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.closePath();
    };

    // 1. Sensitive Content Prank
    // Blurs the original image and adds an "NSFW/Sensitive" warning to click
    if (prankType === "sensitive_content") {
        ctx.filter = "blur(15px) brightness(0.5)";
        ctx.drawImage(originalImg, 0, 0, w, h);
        ctx.filter = "none";

        ctx.fillStyle = "white";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        
        // Draw Warning Text
        let mainFontSize = Math.max(w * 0.04, 16);
        ctx.font = `bold ${mainFontSize}px Arial, sans-serif`;
        ctx.fillText(customText, w / 2, h / 2 - mainFontSize * 0.5);

        let subFontSize = Math.max(w * 0.02, 10);
        ctx.font = `${subFontSize}px Arial, sans-serif`;
        ctx.fillStyle = "#cccccc";
        ctx.fillText("Click or tap to uncover", w / 2, h / 2 + mainFontSize * 0.8);
        
        return canvas;
    }

    // Default Draw for all other pranks
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 2. Fake Video Play Button
    // Draws a translucent dark UI play button
    if (prankType === "play_button") {
        const btnW = Math.min(w * 0.25, 120);
        const btnH = btnW * 0.7;
        const cx = w / 2;
        const cy = h / 2;

        // Button background
        ctx.fillStyle = "rgba(0, 0, 0, 0.65)";
        drawRoundRect(cx - btnW / 2, cy - btnH / 2, btnW, btnH, btnH * 0.2);
        ctx.fill();

        // White Play Triangle
        ctx.fillStyle = "white";
        ctx.beginPath();
        const triW = btnW * 0.35;
        const triH = btnH * 0.45;
        ctx.moveTo(cx - triW / 3, cy - triH / 2);
        ctx.lineTo(cx + triW * (2 / 3), cy);
        ctx.lineTo(cx - triW / 3, cy + triH / 2);
        ctx.closePath();
        ctx.fill();
    } 
    
    // 3. Fake Cracked Screen
    // Procedurally generates realistic-looking screen cracks
    else if (prankType === "cracked_screen") {
        const drawCracks = (color, offsetX, offsetY, lineWidth) => {
            ctx.strokeStyle = color;
            ctx.lineWidth = lineWidth;
            ctx.lineCap = "round";
            ctx.lineJoin = "bevel";

            // Simple pseudo-random generator keeping consistent paths
            let seed = 42; 
            const random = () => {
                let x = Math.sin(seed++) * 10000;
                return x - Math.floor(x);
            };

            const cracksCount = 14;
            const originX = w * 0.35 + offsetX;
            const originY = h * 0.4 + offsetY;

            for (let i = 0; i < cracksCount; i++) {
                ctx.beginPath();
                ctx.moveTo(originX, originY);
                let currX = originX;
                let currY = originY;
                let angle = (Math.PI * 2 / cracksCount) * i + random() * 1.5;

                let segments = 6 + Math.floor(random() * 12);
                for (let j = 0; j < segments; j++) {
                    let length = (w * 0.05) + random() * (w * 0.1);
                    currX += Math.cos(angle) * length;
                    currY += Math.sin(angle) * length;
                    ctx.lineTo(currX, currY);
                    
                    // Jagged turns
                    angle += (random() - 0.5) * 1.5;
                }
                ctx.stroke();

                // Branching paths
                if (random() > 0.4) {
                    ctx.beginPath();
                    ctx.moveTo(currX, currY);
                    let branchAngle = angle + (random() > 0.5 ? 1 : -1) * 0.9;
                    let bX = currX + Math.cos(branchAngle) * (length * 1.5);
                    let bY = currY + Math.sin(branchAngle) * (length * 1.5);
                    ctx.lineTo(bX, bY);
                    ctx.stroke();
                }
            }
        };

        // Render pass for 3D depth illusion
        drawCracks("rgba(0, 0, 0, 0.7)", 2, 2, 3);          // Shadow
        drawCracks("rgba(255, 255, 255, 0.8)", -1, -1, 1.5); // Highlight
        drawCracks("rgba(200, 200, 200, 0.5)", 0, 0, 1);    // Base Glass

        // Impact point hole
        ctx.fillStyle = "rgba(0,0,0,0.85)";
        ctx.beginPath();
        ctx.arc(w * 0.35, h * 0.4, w * 0.015, 0, Math.PI * 2);
        ctx.fill();
    }
    
    // 4. Fake Mouse Cursor
    // Overlays a standard black/white arrow cursor over the image
    else if (prankType === "fake_cursor") {
        const cx = w * 0.65;
        const cy = h * 0.65;
        const scale = Math.max(12, Math.min(w, h) * 0.05);

        ctx.fillStyle = "black";
        
        // Add drop shadow
        ctx.shadowColor = "rgba(0, 0, 0, 0.4)";
        ctx.shadowBlur = scale * 0.2;
        ctx.shadowOffsetX = scale * 0.1;
        ctx.shadowOffsetY = scale * 0.1;

        // Draw standard pointer logic
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx, cy + scale * 1.4);
        ctx.lineTo(cx + scale * 0.35, cy + scale * 1.15);
        ctx.lineTo(cx + scale * 0.7, cy + scale * 1.8);
        ctx.lineTo(cx + scale * 0.9, cy + scale * 1.7);
        ctx.lineTo(cx + scale * 0.55, cy + scale * 1.05);
        ctx.lineTo(cx + scale * 1.1, cy + scale * 1.05);
        ctx.closePath();
        ctx.fill();

        ctx.shadowColor = "transparent";
        ctx.strokeStyle = "white";
        ctx.lineWidth = Math.max(1, scale * 0.08);
        ctx.stroke();
    }
    
    // 5. Fake Loading Wheel
    // Overlays a modern web spinner indicating the image is stuck loading
    else if (prankType === "fake_loading") {
        const cx = w / 2;
        const cy = h / 2;
        const r = Math.min(w, h) * 0.12;
        const thickness = r * 0.15;

        // Faint background ring
        ctx.strokeStyle = "rgba(255, 255, 255, 0.25)";
        ctx.lineWidth = thickness;
        ctx.beginPath();
        ctx.arc(cx, cy, r, 0, Math.PI * 2);
        ctx.stroke();

        // Active highlighted quarter ring
        ctx.strokeStyle = "rgba(255, 255, 255, 0.95)";
        ctx.lineCap = "round";
        ctx.beginPath();
        ctx.arc(cx, cy, r, -Math.PI / 2, 0);
        ctx.stroke();
    }

    return canvas;
}