Image Monkey Placement Randomizer

async function processImage(originalImg) {
    // A base64 encoded public domain monkey image with a transparent background.
    const monkeyBase64 = 'data:image/png;base64,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';

    /**
     * Helper function to load an image from a base64 string.
     * Returns a promise that resolves with the loaded Image object.
     */
    const loadImageFromBase64 = (base64) => {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.onload = () => resolve(img);
            img.onerror = (err) => reject(new Error("Failed to load base64 image: " + err));
            img.src = base64;
        });
    };

    try {
        // Load the embedded monkey image
        const monkeyImg = await loadImageFromBase64(monkeyBase64);

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

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

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

        // Determine the maximum possible top-left coordinates for the monkey
        // This ensures the entire monkey image stays within the canvas bounds.
        // Use Math.max(0, ...) to prevent negative ranges if the monkey is larger than the canvas.
        const maxX = Math.max(0, canvas.width - monkeyImg.width);
        const maxY = Math.max(0, canvas.height - monkeyImg.height);

        // Calculate a random position
        const randomX = Math.floor(Math.random() * (maxX + 1));
        const randomY = Math.floor(Math.random() * (maxY + 1));

        // Draw the monkey image on top of the original image at the random position
        ctx.drawImage(monkeyImg, randomX, randomY);

        // Return the final canvas
        return canvas;

    } catch (error) {
        console.error("Image processing failed:", error);
        // As a fallback, return the original image drawn on a canvas without modifications.
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = originalImg.width;
        canvas.height = originalImg.height;
        ctx.drawImage(originalImg, 0, 0);
        return canvas;
    }
}