Three Photo Mediateka

function processImage(originalImg, mode = 'triptych', gap = 20, backgroundColor = '#ffffff', cornerRadius = 0) {
    // Parse numeric string parameters if necessary
    gap = Number(gap);
    cornerRadius = Number(cornerRadius);
    mode = mode.toLowerCase();

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

    const w = originalImg.width;
    const h = originalImg.height;

    // Helper function to draw an image with optional rounded corners
    function drawRoundedImage(sourceImg, sx, sy, sw, sh, dx, dy, dw, dh, radius) {
        if (radius > 0) {
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(dx + radius, dy);
            ctx.lineTo(dx + dw - radius, dy);
            ctx.quadraticCurveTo(dx + dw, dy, dx + dw, dy + radius);
            ctx.lineTo(dx + dw, dy + dh - radius);
            ctx.quadraticCurveTo(dx + dw, dy + dh, dx + dw - radius, dy + dh);
            ctx.lineTo(dx + radius, dy + dh);
            ctx.quadraticCurveTo(dx, dy + dh, dx, dy + dh - radius);
            ctx.lineTo(dx, dy + radius);
            ctx.quadraticCurveTo(dx, dy, dx + radius, dy);
            ctx.closePath();
            ctx.clip();
            ctx.drawImage(sourceImg, sx, sy, sw, sh, dx, dy, dw, dh);
            ctx.restore();
        } else {
            ctx.drawImage(sourceImg, sx, sy, sw, sh, dx, dy, dw, dh);
        }
    }

    if (mode === 'repeat') {
        // "Repeat" mode: Shows the complete image three times sequentially
        canvas.width = (w * 3) + (gap * 2);
        canvas.height = h;

        // Draw Background
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Draw 3 instances of the full image
        drawRoundedImage(originalImg, 0, 0, w, h, 0, 0, w, h, cornerRadius);
        drawRoundedImage(originalImg, 0, 0, w, h, w + gap, 0, w, h, cornerRadius);
        drawRoundedImage(originalImg, 0, 0, w, h, (w * 2) + (gap * 2), 0, w, h, cornerRadius);

    } else {
        // Default "Triptych" mode: Splitting the image into three vertical panels
        const partWidth = w / 3;
        canvas.width = w + (gap * 2);
        canvas.height = h;

        // Draw Background
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Part 1: Left Third
        drawRoundedImage(
            originalImg, 
            0, 0, partWidth, h, 
            0, 0, partWidth, h, 
            cornerRadius
        );

        // Part 2: Middle Third
        drawRoundedImage(
            originalImg, 
            partWidth, 0, partWidth, h, 
            partWidth + gap, 0, partWidth, h, 
            cornerRadius
        );

        // Part 3: Right Third
        drawRoundedImage(
            originalImg, 
            partWidth * 2, 0, partWidth, h, 
            (partWidth * 2) + (gap * 2), 0, partWidth, h, 
            cornerRadius
        );
    }

    return canvas;
}