Photo Slicing Tool

function processImage(originalImg, rows = 2, cols = 2) {
    // Validate and parse 'rows' parameter
    let parsedRows = parseInt(String(rows), 10);
    if (isNaN(parsedRows) || parsedRows <= 0) {
        console.warn(`Invalid 'rows' parameter value: "${rows}". Defaulting to 2.`);
        parsedRows = 2;
    }

    // Validate and parse 'cols' parameter
    let parsedCols = parseInt(String(cols), 10);
    if (isNaN(parsedCols) || parsedCols <= 0) {
        console.warn(`Invalid 'cols' parameter value: "${cols}". Defaulting to 2.`);
        parsedCols = 2;
    }

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Check if the image is loaded and has valid dimensions
    if (!imgWidth || !imgHeight || imgWidth === 0 || imgHeight === 0) {
        console.error("Image is not loaded or has zero dimensions.");
        const errorDiv = document.createElement('div');
        errorDiv.textContent = "Error: Image is not loaded or has zero dimensions. Please ensure the image is loaded before processing.";
        errorDiv.style.color = 'red';
        errorDiv.style.padding = '10px';
        errorDiv.style.border = '1px solid red';
        errorDiv.style.fontFamily = 'monospace';
        return errorDiv;
    }

    const container = document.createElement('div');
    container.style.display = 'grid';
    container.style.gridTemplateColumns = `repeat(${parsedCols}, auto)`;
    container.style.gridTemplateRows = `repeat(${parsedRows}, auto)`;
    // container.style.gap = '1px'; // Optional: adds a 1px gap between slices
    // container.style.width = `${imgWidth}px`; // Optional: Fix container width
    // container.style.height = `${imgHeight}px`; // Optional: Fix container height

    let slicesGenerated = 0;

    for (let r = 0; r < parsedRows; r++) {
        for (let c = 0; c < parsedCols; c++) {
            // Calculate source coordinates and dimensions for the slice
            // This method ensures that the sum of slice widths/heights equals total image width/height
            const sx = Math.floor(c * imgWidth / parsedCols);
            const sy = Math.floor(r * imgHeight / parsedRows);
            
            const sWidth = Math.floor((c + 1) * imgWidth / parsedCols) - sx;
            const sHeight = Math.floor((r + 1) * imgHeight / parsedRows) - sy;

            // Skip creating a canvas for slices with zero width or height
            if (sWidth <= 0 || sHeight <= 0) {
                console.warn(`Skipping slice at (row:${r}, col:${c}) due to zero width/height (${sWidth}x${sHeight}). This may occur if the image is too small for the requested number of slices.`);
                continue; 
            }

            const sliceCanvas = document.createElement('canvas');
            sliceCanvas.width = sWidth;
            sliceCanvas.height = sHeight;
            // sliceCanvas.style.border = '1px dashed #ccc'; // Optional: visual border for each slice

            const ctx = sliceCanvas.getContext('2d');
            if (!ctx) {
                // This should ideally not happen for '2d' context
                console.error("Failed to get 2D context for slice canvas. Skipping this slice.");
                continue;
            }
            
            // Draw the specific portion of the original image onto the slice canvas
            ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, 0, 0, sWidth, sHeight);
            
            container.appendChild(sliceCanvas);
            slicesGenerated++;
        }
    }
    
    if (slicesGenerated === 0) {
        // This case might be hit if all potential slices had zero dimensions
        console.warn("No slices were generated. This might be due to image dimensions being too small for the number of slices specified.");
        const messageDiv = document.createElement('div');
        messageDiv.textContent = "Warning: No slices could be generated. The image might be too small for the requested number of slices, or parameters might be unsuitable.";
        messageDiv.style.color = 'orange';
        messageDiv.style.padding = '10px';
        messageDiv.style.border = '1px solid orange';
        messageDiv.style.fontFamily = 'monospace';
        return messageDiv;
    }
    
    return container;
}