Tuesday, May 14, 2013

Draw on image

With the DrawOnImage program, you learn to draw things such as images, shapes, and text on an original image, and save the updated image to your local drive. In Java, image manipulation tasks can be performed after the data of original image are read in to an BufferredImage object. When the image data loads in the BufferredImage object, you can manipulate it, use drawing objects (Canvas, JFrame,...) to show it, and write it to the file.

draw on image in Java

DrawOnImage source code:

import javax.imageio.*;
import java.io.*;
import java.awt.*;
import java.awt.geom.*;
import java.awt.image.*;
import java.awt.color.*;
import javax.swing.*;
import java.util.*;

class ShowImg extends Canvas implements ImageObserver{
            public void paint(Graphics g){

1                                  BufferedImage bi=ImageIO.read(new File("image02.jpg"));                

2                                  Graphics2D g2d=(Graphics2D)bi.createGraphics();

3                                  int x=bi.getWidth()/2-100;
4                                  int y=bi.getHeight()/2;
5                                  g2d.setPaint(new GradientPaint(0,1,Color.BLUE,5,5,Color.RED, true));                 
6                                  g2d.fill(new Ellipse2D.Double(x,y,200,50));

7                                  BufferedImage bi1=ImageIO.read(new File("wedding.png"));
8                                  g2d.drawImage(bi1,x+50,y-80,bi1.getWidth(),bi1.getWidth(),this);
9                                  Date dat=new Date();                                 
10                                g2d.setPaint(new Color(255,10,10));
11                                g2d.drawString(dat.toString(),x,y+150);
12                                g.drawImage(bi,0,0,bi.getWidth(),bi.getHeight(),this);
13                                ImageIO.write(bi,"png",new File("drawonimage.png"));                      
                        }catch(IOException e){}

class ProgramWindow extends JFrame{
                        setTitle("Draw on Image");
                        ShowImg si=new ShowImg();
                        add(si, BorderLayout.CENTER);
                        setExtendedState(this.getExtendedState() | this.MAXIMIZED_BOTH);        

public class DrawOnImage{

            public static void main(String[] args) {
                        new ProgramWindow();

Code Explanation
1 Read an image file (image02.jpg) and place the image data in the BufferedImage object bi.
2 Create the Graphics2d object from the BufferredImage bi so you can start draw somethings on it.
3-4 Determine the x-axis and y-axis values to place the ellipse shape on the image.
5 The setPaint of the Graphics2D is invoked to set gradient style to painting context. The GradientPaint object that is passed to setPaint method determines the gradient style. It is a cyclic or acyclic gradient style.
6 The fill method that takes an Ellipse object as its argument creates an ellipse shape on the image. The ellipse shape is filled with the gradient style.
7-8 Read  another image file (wedding.png) and place the image data in the BufferedImage object bi1. Then 
the BufferedImage bi1 is drawn on the orginal image by invoking the drawImage method of Graphics2D.
9-11 Get the current date and time and draw it on the image by invoking the drawString method. The current date and time displays in red color.
12 Draw the updated image on the Canvas so it is ready to show on the program window.
13 Write the updated image to the local file drawonimage.png.  

1 comment:

  1. It is nice article to improve my knowledge.thank you for sharing useful post
    web programming tutorial