Split Images Into Grid Tiles Split an image into a grid of equally sized tiles for puzzles, printing, or Instagram grids.

The tool works by using the React library to manage state and handle user interactions, such as uploading an image file through the FileDropzone component. When an image is uploaded, it creates a URL object for the file using URL.createObjectURL, which is then used as the source for an Image object. The Image object's onload event handler calculates the tile dimensions by dividing the image width by the number of columns and the height by the number of rows, both of which are controlled by range inputs that allow users to specify between 1 and 10 rows and columns.

The Canvas API is used to extract each tile from the source image, with the canvas element's width and height set to the calculated tile dimensions. The drawImage method is then used to draw the corresponding region of the source image onto the canvas, which is then exported as a PNG file using the toDataURL method. This process is repeated for each tile, resulting in an array of PNG files that are stored in the component's state. The tiles are displayed as a grid, with each tile wrapped in an img element and assigned a unique key based on its index. When a tile is clicked, it triggers the downloadOne function, which creates a new link element and simulates a click event to initiate the download.

The tool also uses the useState hook to manage the image state, the useRef hook to reference the canvas element, and the useCallback hook to memoize functions such as handleFile, split, downloadOne, and downloadAll. The useEffect hook is used to clean up the URL object when the component unmounts or the image changes. The resulting PNG files are named using a row_col index format, allowing for easy reassembly of the original image. Any remainder pixels from non-evenly-divisible dimensions are trimmed from the right and bottom edges, ensuring that each tile has the correct dimensions.