Splitting an image into smaller ones

It is easier to split image since JDK 1.4 introducing package javax.imageio.* .

class javax.imageio.ImageIO contains many static method dealing with image processing and using it, image manipulation became easy compared to former JDK.

original image to be splitted

It shows that above one image is splitted into 9 ones

an image splitted into nine ones.

Here is simple class ImagePanel extending javax.swing.JPanel where splitted images are managed and drawn whenever repaint() is called.

public class ImagePanel extends JPanel { private BufferedImage image ; // original image private BufferedImage [] images ; / splitted images private int rows; private int cols; private int width; private int height; private ImageNode [] nodes ; private ImageNode currentNode ; /** * split an image */ protected void split(){ this.images = new BufferedImage[rows*cols]; this.nodes = new ImageNode[rows*cols]; this.width = image.getWidth() / cols; this.height = image.getHeight() / rows; BufferedImage img = null; for(int y = 0 ; y < rows ; y++){ for( int x = 0 ; x < cols ; x++){ img = image.getSubimage(x*width, y*height, width, height); nodes[x + y*cols] = new ImageNode(img, x*width, y*height, width, height); System.out.println(nodes[x+y*cols]); } } .... } .... }

Method BufferedImage.getSubImage(int, int, int, int) has 4 properties specifying the region of each sub-image and each one is managed by class "ImageNode" which is a private inner class defined in the class ImagePanel.

private class ImageNode{ Rectangle r ; Insets inset = new Insets(1,1,1,1); BufferedImage image; public ImageNode(BufferedImage image, int x, int y, int width, int height){ this.image = image; r = new Rectangle(x, y, width, height); } public int getWidth(){ return this.image.getWidth() + inset.left + inset.right; } public int getHeight() { return this.image.getHeight() + inset.top + inset.bottom; } public boolean contains ( int x, int y ){ return r.x <= x && x < (r.x + r.width) && r.y <= y && y < (r.y + r.height) ; } public void draw(Graphics g){ g.drawImage(image, inset.left, inset.top, r.width, r.height, null); g.drawRect(inset.left, inset.top, getWidth()-(inset.left + inset.right), getHeight()-(inset.top + inset.bottom) ); } public String toString() { return "[x:" + r.x + ", y:" + r.y + ", w:" + r.width + "h:" + r.height + "]"; } }

When using mehtod "getSubImage", be aware of the target of the coordinats.

Yellow is an original image and orange sub image

offset X and offset Y should be calculated within the original image itself, neighter parent container containing it nor screen.

Now move to the drawing point.

public class ImagePanel extends JPanel { ..... @Override protected void paintComponent(Graphics g) { if ( nodes == null ) split(); ImageNode node = null; int px = 0, py = 0; for ( int y = 0 ; y < rows ; y++ ){ for( int x = 0 ; x < cols ; x++){ node = nodes[x + y*cols]; px = node.getWidth() * x; py = node.getHeight() * y; g.translate(px, py); if ( currentNode == node ) paintMouseOver(node, g); else node.draw(g); g.translate(-px, -py); } } } ..... }

Because ImagePanel is inherited from JPanel, method paintComponent is appropriate for drawing each of images. When repaint() is called, paintComponent is always invoked automatically.

Method Graphics.translate(..) is frequently used to simplify an puzzling and complicating drawing. It moves current coordinate values from the Graphics to the specifying new values and then ImageNode drawing each image doesn't care about the whole coordinates values.

With Graphics.translate(..), ImageNode can concentrate on its own drawing as if it is the only one drawing image on the canvas.

private class ImageNode { .... // it looks as if it doesn't care about other coordinates public void draw(Graphics g){ g.drawImage(image, inset.left, inset.top, r.width, r.height, null); g.drawRect(inset.left, inset.top, getWidth()-(inset.left + inset.right), getHeight()-(inset.top + inset.bottom) ); } }

Whenever calling Graphics.translate(x, y), always call translate(-x, -y) once again with (-x, -y) so that following jobs doesn't have troubles.

Using ImagePanel is simple like JPanel.

public void setImage(String imagePath) throws IOException{ this.frame = new JFrame("Image Splitter Demo"); this.image = ImageIO.read(new File(imagePath)); ImagePanel imagePanel = new ImagePanel(this.image, 5, 3); imagePanel.split(); frame.getContentPane().add(imagePanel, BorderLayout.CENTER); frame.setSize(300,300); frame.setVisible(true); }

ImagePanel divide an image into 5 rows and 3 columns sub ones.

below is constructor of ImagePanel

public class ImagePanel extends JPanel { private BufferedImage image ; private BufferedImage [] images ; private int rows; private int cols; private int width; private int height; private ImageNode [] nodes ; private ImageNode currentNode ; public ImagePanel(BufferedImage image, int row, int col){ this.image = image; this.rows = row; this.cols = col; } .... }