Photo Merger Tool

async function processImage(originalImg, secondImageSrc = "", mergeDirection = "horizontal", gap = 0) {
    // Validate originalImg
    if (!(originalImg instanceof HTMLImageElement) || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        console.error("Error: originalImg is not a valid or loaded HTMLImageElement.");
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 300;
        errorCanvas.height = 100;
        const errorCtx = errorCanvas.getContext('2d');
        errorCtx.fillStyle = 'red';
        errorCtx.font = 'bold 16px Arial';
        errorCtx.textAlign = 'center';
        errorCtx.textBaseline = 'middle';
        errorCtx.fillText('Error: Original image is invalid.', errorCanvas.width / 2, errorCanvas.height / 2);
        return errorCanvas;
    }

    const img1Width = originalImg.naturalWidth;
    const img1Height = originalImg.naturalHeight;

    // Ensure gap is a non-negative number
    gap = Math.max(0, Number(gap));
    if (isNaN(gap)) {
        console.warn(`Invalid gap value "${gap}", defaulting to 0.`);
        gap = 0;
    }

    let img2 = null;
    let img2Width = 0;
    let img2Height = 0;

    if (secondImageSrc && typeof secondImageSrc === 'string') {
        try {
            img2 = await new Promise((resolve) => {
                const image = new Image();
                
                if (!secondImageSrc.startsWith('data:')) {
                    try {
                        const absoluteUrl = new URL(secondImageSrc, document.baseURI).toString();
                        if (new URL(absoluteUrl).origin !== window.location.origin) {
                            image.crossOrigin = "Anonymous";
                        }
                    } catch (e) {
                        console.warn("Could not parse secondImageSrc as a full URL. Attempting to load directly. This might be a relative path or a malformed URL. Error:", e.message);
                    }
                }

                image.onload = () => {
                    if (image.naturalWidth === 0 || image.naturalHeight === 0) {
                        console.error("Second image loaded successfully but has zero dimensions. Source:", secondImageSrc);
                        resolve(null);
                    } else {
                        resolve(image);
                    }
                };
                image.onerror = (errorEvent) => {
                     console.error("Failed to load the second image. Source:", secondImageSrc, "Error event:", errorEvent);
                     resolve(null);
                };
                image.src = secondImageSrc;
            });

            if (img2) {
                img2Width = img2.naturalWidth;
                img2Height = img2.naturalHeight;
            }

        } catch (error) {
            console.error("Unexpected error during the second image loading promise setup:", error);
            img2 = null;
        }
    } else if (secondImageSrc) { // If secondImageSrc is provided but not a string
        console.warn("secondImageSrc was provided but is not a string. Ignoring second image.", secondImageSrc);
    }


    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    if (!img2) {
        canvas.width = img1Width;
        canvas.height = img1Height;
        ctx.drawImage(originalImg, 0, 0, img1Width, img1Height);
        
        if (secondImageSrc && typeof secondImageSrc === 'string') {
             console.warn("Second image could not be loaded or is invalid. Displaying only the first image.");
        }
        return canvas;
    }

    if (mergeDirection === "horizontal") {
        canvas.width = img1Width + img2Width + gap;
        canvas.height = Math.max(img1Height, img2Height);
        
        const y1 = (canvas.height - img1Height) / 2;
        const y2 = (canvas.height - img2Height) / 2;
        
        ctx.drawImage(originalImg, 0, y1, img1Width, img1Height);
        ctx.drawImage(img2, img1Width + gap, y2, img2Width, img2Height);

    } else if (mergeDirection === "vertical") {
        canvas.width = Math.max(img1Width, img2Width);
        canvas.height = img1Height + img2Height + gap;

        const x1 = (canvas.width - img1Width) / 2;
        const x2 = (canvas.width - img2Width) / 2;

        ctx.drawImage(originalImg, x1, 0, img1Width, img1Height);
        ctx.drawImage(img2, x2, img1Height + gap, img2Width, img2Height);
    } else {
        console.warn(`Invalid mergeDirection: "${mergeDirection}". It must be "horizontal" or "vertical". Displaying only the first image.`);
        canvas.width = img1Width;
        canvas.height = img1Height;
        ctx.drawImage(originalImg, 0, 0, img1Width, img1Height);
    }

    return canvas;
}