Subliminal Frame Injection Tool

function processImage(
    originalImg,
    subliminalText = "RELAX",
    flashDurationMs = 33,
    intervalDurationMs = 2500,
    textColor = "white",
    bgColor = "black",
    fontSizeRatio = 0.15
) {
    const canvas = document.createElement("canvas");
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext("2d");

    // Draw the initial original image
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    let lastTime = performance.now();
    let isFlashing = false;
    let hasBeenConnected = false;

    function animate(currentTime) {
        // Track DOM insertion to cleanly pause/stop the loop when removed
        if (canvas.isConnected) {
            hasBeenConnected = true;
        }
        if (hasBeenConnected && !canvas.isConnected) {
            return; // Terminate animation loop if canvas is removed from document
        }

        const deltaTime = currentTime - lastTime;

        if (isFlashing) {
            // Check if it's time to hide the subliminal message
            if (deltaTime >= flashDurationMs) {
                isFlashing = false;
                lastTime = currentTime;
                // Restore the original image
                ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
            }
        } else {
            // Check if it's time to flash the subliminal message
            if (deltaTime >= intervalDurationMs) {
                isFlashing = true;
                lastTime = currentTime;
                
                // Draw subliminal frame background
                ctx.fillStyle = bgColor;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // Setup and draw subliminal text
                ctx.fillStyle = textColor;
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                
                const fontSize = Math.max(14, Math.floor(canvas.width * fontSizeRatio));
                ctx.font = `bold ${fontSize}px "Helvetica Neue", Helvetica, Arial, sans-serif`;
                
                // Handle optional multiple lines by splitting string by \n
                const lines = subliminalText.split("\\n");
                const lineHeight = fontSize * 1.2;
                const totalHeight = lines.length * lineHeight;
                let startY = (canvas.height - totalHeight) / 2 + (fontSize / 2);
                
                for (let i = 0; i < lines.length; i++) {
                    ctx.fillText(lines[i], canvas.width / 2, startY + (i * lineHeight));
                }
            }
        }

        requestAnimationFrame(animate);
    }

    // Start the injection loop
    requestAnimationFrame(animate);

    return canvas;
}