Image Close-Up Portrait Of Arabic Vendor In Bustling Marketplace

/**
 * Applies a stylistic filter to an image to evoke the feeling of a "Close-Up Portrait of an Arabic Vendor in a Bustling Marketplace".
 * This function interprets the detailed prompt as a set of visual effects, including warm golden light, rich textures,
 * soft glows, and a cinematic vignette, to transform the input image.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @param {number} warmth A value from 0 to 1 controlling the intensity of the warm, golden dawn light. Default is 0.3.
 * @param {number} contrast A value controlling the image contrast to simulate intricate shadows. 1 is normal. Default is 1.2.
 * @param {number} glowIntensity A value from 0 to 1 for the brightness of the simulated background lanterns. Default is 0.4.
 * @param {number} patternOpacity A value from 0 to 1 for the visibility of the overlaid ornate textile pattern. Default is 0.15.
 * @param {number} vignetteStrength A value from 0 to 1 for the darkness of the cinematic vignette effect. Default is 0.6.
 * @returns {HTMLCanvasElement} A new canvas element with the stylized image.
 */
async function processImage(originalImg, warmth = 0.3, contrast = 1.2, glowIntensity = 0.4, patternOpacity = 0.15, vignetteStrength = 0.6) {
    // 1. Setup Canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // 2. Base Image with Initial Adjustments
    // Apply filters for a dramatic, cinematic base look with rich shadows.
    ctx.filter = `contrast(${contrast}) saturate(1.1) sepia(${warmth * 0.5}) brightness(0.95)`;
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    ctx.filter = 'none'; // Reset filter for subsequent operations

    // 3. Warm Golden Light Overlay
    // This layer simulates the warm, directional light of dawn.
    ctx.globalCompositeOperation = 'soft-light';
    ctx.fillStyle = `rgba(255, 165, 0, ${warmth})`; // A warm orange hue
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = 'source-over'; // Reset blend mode

    // 4. Ornate Textile Pattern Overlay
    // A procedurally generated pattern hints at rich fabrics in the scene.
    const patternCanvas = document.createElement('canvas');
    const patternCtx = patternCanvas.getContext('2d');
    const patternSize = 60;
    patternCanvas.width = patternSize;
    patternCanvas.height = patternSize;
    
    // Create a simple, abstract pattern representing ornate textiles
    patternCtx.fillStyle = 'rgba(80, 0, 0, 0.5)'; // Dark red base
    patternCtx.fillRect(0, 0, patternSize, patternSize);
    patternCtx.strokeStyle = 'rgba(255, 215, 0, 0.5)'; // Gold color for threads
    patternCtx.lineWidth = 1.5;
    patternCtx.beginPath();
    patternCtx.arc(0, 0, patternSize / 2, 0, Math.PI / 2);
    patternCtx.stroke();
    patternCtx.beginPath();
    patternCtx.arc(patternSize, patternSize, patternSize / 2, Math.PI, Math.PI * 1.5);
    patternCtx.stroke();
    patternCtx.beginPath();
    patternCtx.arc(patternSize, 0, patternSize / 2, Math.PI / 2, Math.PI);
    patternCtx.stroke();
    patternCtx.beginPath();
    patternCtx.arc(0, patternSize, patternSize / 2, Math.PI * 1.5, Math.PI * 2);
    patternCtx.stroke();

    // Apply the generated pattern to the main canvas
    const pattern = ctx.createPattern(patternCanvas, 'repeat');
    ctx.globalCompositeOperation = 'overlay';
    ctx.globalAlpha = patternOpacity;
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalAlpha = 1.0; // Reset alpha
    ctx.globalCompositeOperation = 'source-over'; // Reset blend mode

    // 5. Softly Glowing Background Lanterns
    // Use radial gradients to create non-specific points of light.
    ctx.globalCompositeOperation = 'lighter';
    const numLanterns = 3;
    for (let i = 0; i < numLanterns; i++) {
        // Position lanterns somewhat randomly in the upper background
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height * 0.6;
        const maxRadius = Math.min(canvas.width, canvas.height) / 4;
        const radius = (Math.random() * 0.5 + 0.5) * maxRadius;

        const glow = ctx.createRadialGradient(x, y, 0, x, y, radius);
        glow.addColorStop(0, `rgba(255, 220, 150, ${glowIntensity})`);
        glow.addColorStop(0.3, `rgba(255, 200, 100, ${glowIntensity * 0.7})`);
        glow.addColorStop(1, 'rgba(255, 165, 0, 0)');

        ctx.fillStyle = glow;
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fill();
    }
    ctx.globalCompositeOperation = 'source-over'; // Reset blend mode

    // 6. Cinematic Depth of Field (Vignette)
    // A dark vignette focuses the viewer on the central subject, mimicking a shallow depth of field.
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const innerRadius = Math.min(canvas.width, canvas.height) * 0.3;
    const outerRadius = Math.max(canvas.width, canvas.height) * 0.7;
    
    const vignette = ctx.createRadialGradient(centerX, centerY, innerRadius, centerX, centerY, outerRadius);
    vignette.addColorStop(0, 'rgba(0, 0, 0, 0)');
    vignette.addColorStop(1, `rgba(0, 0, 0, ${vignetteStrength})`);

    ctx.fillStyle = vignette;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    return canvas;
}