Saturday, July 3, 2010

Basic Image Loading and Display

เรามาลองทำโปรเจคเกี่ยวกับ Image processing เบื้องต้นด้วยจาวากันครับ

ก่อนอื่น เราจะออกแบบให้มีหน้าแสดงผลง่ายๆ โดยใช้เฟรม (JFrame) ครับ ซึ่งก็จะมีหน้าตาดังนี้

ซึ่งก็ใช้รหัสโปรแกรมง่ายๆ ดังนี้ครับ
package dip;

import javax.swing.JFrame;

public class Main
{
    public static void main(String[] args)
    {
        new ImageFrame();
    }
}

class ImageFrame extends JFrame
{
    public ImageFrame()
    {
        //set Frame's properties
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setTitle("Image Processing");   //frame title
        setSize(250,250);   //initial size
        setLocationRelativeTo(null); //set window to center of the screen
        setVisible(true);
    }    
}

ในขั้นตอนต่อไปก็จะทำการทดลองอ่านรูปขึ้นมา แล้วแสดงผลในหน้าต่างดังกล่าว ซึ่งจะมีขั้นตอนคือ

  1. สร้าง component เพื่อรองรับรูป อาจจะเป็น JComponent หรือ JPanel ก็ำได้
  2. อ่านรูปที่ต้องการ
  3. วาดรูปนั้นลงบน component
  4. เพิ่ม component ที่มีรูปอยู่นี้บนเฟรม
ขั้นตอนที่ 1-3 สร้าง component เพื่อรองรับรูป, อ่านรูปที่ต้องการ และวาดรูปลงบน component โดยกำหนดให้รูปอยู่ที่ d:/lena.jpg
เราจะสร้างคลาสขึ้นมาใหม่ ดังนี้

package dip;

import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JComponent;

class Canvas extends JComponent
{
    private BufferedImage img;

    public Canvas()
    {
        try
        {
            //read an image lena.jpg
            img = ImageIO.read(new File("d:/lena.jpg"));
        }
        catch(IOException e)
        {
            e.printStackTrace();
        }
    }

    public void paintComponent(Graphics g)
    {
        if(img==null)
            return;
        g.drawImage(img,0,0,null);
    }
}

ขั้นตอนที่ 4 เพิ่ม component นี้ให้เฟรม ในที่นี้เราจะแก้ไข constructor ของเฟรมหลัก ดังนี้

    public ImageFrame()
    {
        //set Frame's properties
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setTitle("Image Processing");   //frame title
        setSize(250,250);   //initial size
        setLocationRelativeTo(null); //set window to center of the screen
       //create and add image component to frame
        Canvas myCanvas = new Canvas();
        add(myCanvas);
        setVisible(true);
    } 

เมื่อรันโปรแกรม ผลลัพธ์ที่ได้ก็จะเป็นดังนี้ครับ