Three Photo Merger Tool

async function processImage(originalImg, imgUrl2 = "", imgUrl3 = "", layout = "horizontal", backgroundColor = "#ffffff", gap = 10) {
    // Utility to load secondary images or fallback to the original image
    const loadImage = (src) => new Promise((resolve) => {
        if (!src || typeof src !== 'string' || src.trim() === '') {
            return resolve(originalImg);
        }
        const img = new Image();
        img.crossOrigin = "Anonymous";
        img.onload = () => resolve(img);
        img.onerror = () => resolve(originalImg); // Fallback on failure
        img.src = src;
    });

    // Wait for additional images to load
    const img2 = await loadImage(imgUrl2);
    const img3 = await loadImage(imgUrl3);

    // Sanitize parameters
    gap = parseInt(gap);
    if (isNaN(gap)) gap = 10;

    layout = (layout || "").toLowerCase();
    if (!["horizontal", "vertical", "grid"].includes(layout)) {
        layout = "horizontal";
    }

    // Get natural dimensions safely with a fallback
    const w1 = originalImg.naturalWidth || originalImg.width || 1;
    const h1 = originalImg.naturalHeight || originalImg.height || 1;
    const nw2 = img2.naturalWidth || img2.width || 1;
    const nh2 = img2.naturalHeight || img2.height || 1;
    const nw3 = img3.naturalWidth || img3.width || 1;
    const nh3 = img3.naturalHeight || img3.height || 1;

    let w2, h2, w3, h3;
    let tw, th; // Final canvas total width and height
    let x1, y1, x2, y2, x3, y3; // Image coordinates

    // Calculate layout coordinates and dimensions
    if (layout === "horizontal") {
        // Scale images 2 and 3 to match the height of image 1
        h2 = h1; 
        w2 = (nw2 / nh2) * h1;
        h3 = h1; 
        w3 = (nw3 / nh3) * h1;
        
        tw = w1 + w2 + w3 + (gap * 2);
        th = h1;
        
        x1 = 0; 
        y1 = 0;
        
        x2 = w1 + gap; 
        y2 = 0;
        
        x3 = w1 + w2 + (gap * 2); 
        y3 = 0;
        
    } else if (layout === "vertical") {
        // Scale images 2 and 3 to match the width of image 1
        w2 = w1; 
        h2 = (nh2 / nw2) * w1;
        w3 = w1; 
        h3 = (nh3 / nw3) * w1;
        
        tw = w1;
        th = h1 + h2 + h3 + (gap * 2);
        
        x1 = 0; 
        y1 = 0;
        
        x2 = 0; 
        y2 = h1 + gap;
        
        x3 = 0; 
        y3 = h1 + h2 + (gap * 2);
        
    } else { 
        // Grid: image 1 and 2 side by side, image 3 full width below them
        h2 = h1; 
        w2 = (nw2 / nh2) * h1;
        
        let row1Width = w1 + w2 + gap;
        
        w3 = row1Width; 
        h3 = (nh3 / nw3) * w3;
        
        tw = row1Width;
        th = h1 + h3 + gap;
        
        x1 = 0; 
        y1 = 0;
        
        x2 = w1 + gap; 
        y2 = 0;
        
        x3 = 0; 
        y3 = h1 + gap;
    }

    // Set up canvas
    const canvas = document.createElement("canvas");
    canvas.width = tw;
    canvas.height = th;
    const ctx = canvas.getContext("2d");

    // Optional Background fill 
    if (backgroundColor && backgroundColor.toLowerCase() !== "transparent") {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, tw, th);
    }

    // Render smooth imagery
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';

    // Draw images to canvas 
    ctx.drawImage(originalImg, x1, y1, w1, h1);
    ctx.drawImage(img2, x2, y2, w2, h2);
    ctx.drawImage(img3, x3, y3, w3, h3);

    return canvas;
}