Image Triple Splitter Tool

function processImage(originalImg, splitDirection = "vertical", gap = 10) {
    // Parse gap to ensure it's a number
    const parsedGap = typeof gap === 'string' ? parseInt(gap, 10) || 0 : gap;
    
    // Create the container element to hold the split pieces
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.gap = parsedGap + 'px';
    container.style.width = '100%';
    container.style.maxWidth = '100%';
    container.style.boxSizing = 'border-box';
    
    // Determine the direction of the split (vertical cuts create 3 columns, horizontal cuts create 3 rows)
    const isHorizontal = splitDirection.toLowerCase() === "horizontal" || splitDirection.toLowerCase() === "rows";
    
    if (isHorizontal) {
        container.style.flexDirection = 'column';
    } else {
        container.style.flexDirection = 'row';
    }
    
    // Define rows and columns based on direction
    const cols = isHorizontal ? 1 : 3;
    const rows = isHorizontal ? 3 : 1;
    
    const pieceWidth = originalImg.width / cols;
    const pieceHeight = originalImg.height / rows;
    
    // Create exactly 3 canvas elements for the triple split
    for (let i = 0; i < 3; i++) {
        const canvas = document.createElement('canvas');
        canvas.width = pieceWidth;
        canvas.height = pieceHeight;
        
        const ctx = canvas.getContext('2d');
        
        // Calculate the source coordinates for slicing the original image
        const sx = isHorizontal ? 0 : i * pieceWidth;
        const sy = isHorizontal ? i * pieceHeight : 0;
        
        // Draw the sliced portion onto the current canvas
        ctx.drawImage(
            originalImg, 
            sx, sy, pieceWidth, pieceHeight, // Source clipping
            0, 0, pieceWidth, pieceHeight    // Destination drawing
        );
        
        // Make the canvases responsive within their container
        canvas.style.maxWidth = '100%';
        canvas.style.height = 'auto';
        canvas.style.display = 'block';
        
        // Ensure flex items shrink and grow appropriately in a row layout
        if (!isHorizontal) {
            canvas.style.flex = '1 1 0';
            canvas.style.minWidth = '0';
        }
        
        container.appendChild(canvas);
    }
    
    return container;
}