Image Lie Detector

/**
 * Simulates a "Lie Detector" scan on an image by adding various UI overlays.
 * This is a novelty tool that displays a random result of "TRUTH" or "LIE DETECTED".
 *
 * @param {Image} originalImg The original JavaScript Image object to process.
 * @returns {Promise<HTMLCanvasElement>} A Promise that resolves with a canvas element containing the final image with overlays.
 */
async function processImage(originalImg) {
    // 1. Dynamically load the Google Font 'Orbitron' for a techy, digital feel.
    // This is necessary to ensure the font is available before drawing text on the canvas.
    try {
        const font = new FontFace('Orbitron', 'url(https://fonts.gstatic.com/s/orbitron/v25/yMJRMIlzdpvBhQQL_Qq7dy0.woff2)');
        await font.load();
        document.fonts.add(font);
    } catch (e) {
        console.error("Font loading failed, using fallback sans-serif.", e);
        // If font loading fails, the browser will use a default font, so the function can still proceed.
    }

    // 2. Set up the canvas with the same dimensions as the original image.
    const canvas = document.createElement('canvas');
    const {
        width,
        height
    } = originalImg;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // 3. Draw the original image onto the canvas to serve as the background.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // --- Start applying overlay effects ---

    // 4. Draw a subtle vignette to focus the center of the image.
    const gradient = ctx.createRadialGradient(width / 2, height / 2, Math.min(width, height) / 3, width / 2, height / 2, Math.max(width, height) / 1.5);
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(1, 'rgba(0,0,0,0.5)');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);

    // 5. Draw a polygraph-style graph line horizontally across the middle.
    ctx.save();
    ctx.strokeStyle = 'rgba(0, 255, 0, 0.6)';
    ctx.lineWidth = Math.max(1, width / 400); // Line width scales with image size
    ctx.beginPath();
    const midY = height / 2;
    const amplitude = height / 20; // Fluctuation of the line
    ctx.moveTo(0, midY);
    for (let x = 0; x < width; x += 5) {
        const randomY = midY + (Math.random() - 0.5) * amplitude * (1 + Math.random());
        ctx.lineTo(x, randomY);
    }
    ctx.stroke();
    ctx.restore();

    // 6. Add a "scanning" horizontal line effect for a futuristic UI feel.
    ctx.fillStyle = 'rgba(0, 255, 0, 0.08)';
    for (let i = 0; i < height; i += 4) {
        ctx.fillRect(0, i, width, 2);
    }

    // 7. Add technical-looking text in the top-left corner.
    const fontSizeSmall = Math.max(12, Math.round(width / 80));
    ctx.font = `${fontSizeSmall}px Orbitron, sans-serif`;
    ctx.fillStyle = 'rgba(0, 255, 128, 0.8)';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    ctx.fillText('// SCANNING...', 10, 10);
    ctx.fillText(`// SUBJECT ID: ${Math.floor(Math.random() * 9000) + 1000}`, 10, 15 + fontSizeSmall);

    // 8. Place a random "target" crosshair on the image.
    const targetX = width * (0.3 + Math.random() * 0.4);
    const targetY = height * (0.3 + Math.random() * 0.4);
    const targetRadius = Math.min(width, height) / 15;
    ctx.strokeStyle = 'rgba(255, 0, 0, 0.7)';
    ctx.lineWidth = Math.max(1, width / 500);
    ctx.beginPath();
    ctx.arc(targetX, targetY, targetRadius, 0, 2 * Math.PI);
    ctx.moveTo(targetX - targetRadius * 1.5, targetY);
    ctx.lineTo(targetX + targetRadius * 1.5, targetY);
    ctx.moveTo(targetX, targetY - targetRadius * 1.5);
    ctx.lineTo(targetX, targetY + targetRadius * 1.5);
    ctx.stroke();

    // 9. Randomly determine the "Lie Detector" result.
    const isLie = Math.random() < 0.5;
    const resultText = isLie ? "LIE DETECTED" : "TRUTH";
    const resultColor = isLie ? 'rgba(255, 50, 50, 1)' : 'rgba(50, 255, 50, 1)';

    // 10. Draw the final result in a styled box in the bottom-right corner.
    const fontSizeLarge = Math.max(24, Math.round(width / 20));
    ctx.font = `bold ${fontSizeLarge}px Orbitron, sans-serif`;

    const textMetrics = ctx.measureText(resultText);
    const boxWidth = textMetrics.width * 1.2;
    const boxHeight = fontSizeLarge * 1.5;
    const boxX = width - boxWidth - 20;
    const boxY = height - boxHeight - 20;

    // Draw the background box for the text.
    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
    ctx.fillRect(boxX, boxY, boxWidth, boxHeight);
    ctx.strokeStyle = resultColor;
    ctx.lineWidth = Math.max(2, width / 300);
    ctx.strokeRect(boxX, boxY, boxWidth, boxHeight);

    // Draw the result text itself.
    ctx.fillStyle = resultColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(resultText, boxX + boxWidth / 2, boxY + boxHeight / 2);

    // 11. Return the final canvas element.
    return canvas;
}