Image Prison Gate Entrance Background Generator

async function processImage(originalImg) {
    // A Base64 encoded SVG of a gold padlock. Using a data URI avoids external requests.
    const padlockDataURI = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZmlsbD0iI0ZGRDcwMCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIwLjUiIGQ9Ik0xOCA4aC0xVjZjMC0yLjc2LTIuMjQtNS01LTVTNyAzLjI0IDcgNnYySDZjLTEuMSAwLTIgLjktMiAydjEwYzAgMS4xLjkgMiAyIDJ flashyJmMxLjEgMCAyLS45IDItMlYxMGMwLTEuMS0uOS0yLTItMnoiLz48cGF0aCBmaWxsPSIjRkZFNUE2IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjAuNSIgZD0iTTE4IDhWNmMyLTEuNzEtMS4zOS0zLjEtMy4xLTMuMUMxMy4xOSAyLjkgMTEuOCA0LjI5IDExLjggNnYySDZMMTIgMThMMTggOFoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjAuNSIgZD0iTTEyIDE3Yy0xLjEgMC0yLS45LTItMnMuOS0yIDItMiAyIC45IDIgMi0uOSAyLTIgMnoiLz48L3N2Zz4=';

    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // 1. Draw the original image as the background
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 2. Draw the prison bars
    ctx.fillStyle = '#383838'; // Dark gray, metallic color for the bars
    ctx.shadowColor = 'rgba(0, 0, 0, 0.7)'; // Dark shadow for a 3D effect
    ctx.shadowBlur = Math.max(8, width / 100);
    ctx.shadowOffsetX = Math.max(3, width / 200);
    ctx.shadowOffsetY = Math.max(3, width / 200);

    const barThickness = Math.max(8, Math.round(width / 60));

    // Calculate the number and spacing of bars to be proportional to image size
    const numVerticalBars = Math.max(5, 2 * Math.floor(width / 150) + 1); // Ensure an odd number for a central bar
    const verticalSpacing = width / (numVerticalBars + 1);

    const numHorizontalBars = Math.max(2, Math.floor(height / 150));
    const horizontalSpacing = height / (numHorizontalBars + 1);

    // Draw horizontal bars
    for (let i = 1; i <= numHorizontalBars; i++) {
        const y = i * horizontalSpacing;
        ctx.fillRect(0, y - barThickness / 2, width, barThickness);
    }

    // Draw vertical bars
    for (let i = 1; i <= numVerticalBars; i++) {
        const x = i * verticalSpacing;
        ctx.fillRect(x - barThickness / 2, 0, barThickness, height);
    }

    // 3. Load and draw the padlock
    try {
        const padlockImg = new Image();

        // Create a promise that resolves when the padlock image is loaded
        const padlockLoaded = new Promise((resolve, reject) => {
            padlockImg.onload = resolve;
            padlockImg.onerror = reject;
            padlockImg.src = padlockDataURI;
        });

        await padlockLoaded;

        // Reset shadow before drawing the padlock to keep it crisp
        ctx.shadowColor = 'transparent';
        ctx.shadowBlur = 0;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;

        // Calculate padlock size and position to be centered
        const padlockSize = Math.min(width, height) / 6;
        const padlockX = (width - padlockSize) / 2;
        const padlockY = (height - padlockSize) / 2;

        // Draw the padlock in the center
        ctx.drawImage(padlockImg, padlockX, padlockY, padlockSize, padlockSize);

    } catch (error) {
        console.error("Failed to load padlock image:", error);
    }

    // Return the final canvas
    return canvas;
}