Image Unpacking Tool

function processImage(originalImg, columns = '4', rows = '4') {
    // Parse parameters, ensuring they are valid numbers greater than 0.
    const numCols = Math.max(1, parseInt(columns, 10) || 4);
    const numRows = Math.max(1, parseInt(rows, 10) || 4);

    // Get the dimensions of the original sprite sheet.
    const sourceWidth = originalImg.width;
    const sourceHeight = originalImg.height;

    // Calculate the dimensions of a single sprite.
    const spriteWidth = sourceWidth / numCols;
    const spriteHeight = sourceHeight / numRows;

    // Create a container div to hold all the unpacked sprites.
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexWrap = 'wrap';
    container.style.gap = '10px';
    container.style.padding = '10px';
    container.style.justifyContent = 'center';
    container.style.alignItems = 'center';
    container.style.border = '2px dashed #ccc';
    container.style.borderRadius = '8px';
    container.style.backgroundColor = '#f9f9f9';

    // Loop through each row and column to extract the individual sprites.
    for (let r = 0; r < numRows; r++) {
        for (let c = 0; c < numCols; c++) {
            // Create a canvas for the individual sprite.
            const canvas = document.createElement('canvas');
            canvas.width = spriteWidth;
            canvas.height = spriteHeight;
            canvas.style.border = '1px solid #ddd'; // Add a border to see the sprite's boundary.
            canvas.title = `Sprite (Row: ${r + 1}, Col: ${c + 1})`;

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

            // Define the source coordinates and dimensions from the original image.
            const sourceX = c * spriteWidth;
            const sourceY = r * spriteHeight;

            // Use drawImage to clip the sprite from the original image
            // and draw it onto the new canvas.
            // drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
            ctx.drawImage(
                originalImg,
                sourceX,
                sourceY,
                spriteWidth,
                spriteHeight,
                0,
                0,
                spriteWidth,
                spriteHeight
            );

            // Add the newly created sprite canvas to the container.
            container.appendChild(canvas);
        }
    }

    // Return the container element which holds all the unpacked sprites.
    return container;
}