Image Aesthetic Profile Picture Generator

/**
 * Creates an aesthetic profile picture with a white, pink, and green aura background.
 * The input image is cropped into a 1:1 circle and centered on the aura.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 * @returns {HTMLCanvasElement} A canvas element representing the generated profile picture.
 */
function processImage(originalImg) {
    // Define the canvas size for the 1:1 profile picture
    const size = 512;
    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');

    const centerX = size / 2;
    const centerY = size / 2;
    const radius = size / 2;

    // 1. Create the aesthetic aura background using a radial gradient
    const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
    
    // Aesthetic color palette (white, pink, green)
    const white = '#FFFFFF';
    const pink = '#F8BBD0'; // A soft, light pink
    const green = '#A7D7C5'; // A soft, minty green

    // Define the color stops for a soft aura effect
    gradient.addColorStop(0, white);
    gradient.addColorStop(0.4, white); // Central white glow
    gradient.addColorStop(0.7, pink);  // Transition to pink
    gradient.addColorStop(1, green);   // End with green at the edges

    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, size, size);

    // 2. Prepare to draw the original image as a circle by creating a clipping path
    ctx.save(); // Save the current state before applying the clip

    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.clip();

    // 3. Draw the original image, ensuring it's centered and cropped to fit the circle
    // Calculate the dimensions for a center-square crop from the original image
    let sx, sy, sWidth, sHeight;
    const originalRatio = originalImg.width / originalImg.height;

    if (originalRatio > 1) { // Image is wider than it is tall
        sHeight = originalImg.height;
        sWidth = sHeight;
        sx = (originalImg.width - sWidth) / 2;
        sy = 0;
    } else { // Image is taller than it is wide or is a square
        sWidth = originalImg.width;
        sHeight = sWidth;
        sx = 0;
        sy = (originalImg.height - sHeight) / 2;
    }

    // Draw the cropped portion of the original image onto the clipped canvas
    ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, 0, 0, size, size);

    // 4. Restore the context to remove the clipping mask, which is good practice
    ctx.restore();

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