Croping Image dengan Mouse Event

502 Views

Croping Image dengan Mouse Event – Tutorial grafika komputer sebelumnya telah kita bahas mengenai resize gambar serta melakukan paint secara dinamis menggunakan JButton dan JFrame. Ketika event mouse di mouseClicked, mouseDragged yang berguna untuk membuat rectangle pada sebuah Gambar. Method yang bertugas untuk membuat rectangle terdapat pada class Graphics yaitu g.drawRect(A.x,A.y,B.x-A.x,B.y-A.y);

Croping image pada Java bisa kita lakukan dengan 2 cara yaitu menggunakan class BufferedImage atau via library OpenCV. Tapi saya lebih suka menggunakan OpenCV saja karena kalau menggunakan BufferedImage itu tidak bekerja dengan baik untuk proses resize nya. Oiya untuk install OpenCV kalian bisa baca https://softscients.com/2020/11/10/belajar-opencv/

Tulisan ini dibagi menjadi beberapa serial yaitu

Berikut kode lengkapnya ketika adanya event klik kanan akan mempunyai algoritma sebagai berikut

membaca file gambar
melakukan resize gambar untuk menyesuaikan size saat ini DIMENSION
melakukan croping berdasakarkan koordinat A, B

class Button extends JButton{
    Image IMAGE;
    File FILE;
    Dimension DIMENSION;
    Point A,B;
    public Button(){
        super();
        setSize(100,100);
        setText("Button");
        FILE = new File("D:/corner_gambar3.jpg");
        DIMENSION = new Dimension(100,100);//sebagai awalan saja
        
        this.addMouseListener(new MouseAdapter(){
            @Override
            public void mousePressed(MouseEvent e){
                if(e.getButton()==MouseEvent.BUTTON3){
                    System.out.println("klik kanan");                    
                    Imgcodecs imageCodecs = new Imgcodecs(); 
                    Mat matSrc = Imgcodecs.imread(FILE.getAbsolutePath(),1);
                    Imgproc.resize(matSrc, matSrc, new Size(DIMENSION.width,DIMENSION.height),Imgproc.INTER_LINEAR);
                    Rect rectCrop = new Rect(A.x,A.y,B.x-A.x,B.y-A.y);
                    matSrc = new Mat(matSrc, rectCrop);
                    imageCodecs.imwrite("D:/out.jpg",matSrc);
                    repaint();
                    return;
                }
                System.out.println("aku sedang di klik ");
                A = new Point(e.getX(),e.getY());
                repaint();
            }
            @Override
            public void mouseReleased(MouseEvent e){
                System.out.println("aku sedang dilepas");
                
            }
        });
        
        this.addMouseMotionListener(new MouseAdapter() {
            @Override
            public void mouseDragged(MouseEvent e){
                System.out.println("aku sedang di drag");
                B = new Point(e.getX(),e.getY());
                repaint();
            }
            @Override
            public void mouseMoved(MouseEvent e){
                //System.out.println("aku sedang digeser ");                
            }
        });
    }
    @Override
    public void paint(Graphics g){
        IMAGE = new ImageIcon(FILE.getAbsolutePath()).getImage();
        g.drawImage(IMAGE,
                    0,
                    0,                        
                    DIMENSION.width,DIMENSION.height,
                    null);
        
        int diameter = 10;
        if(A!=null){
            g.setColor(Color.white);
            g.fillOval(A.x-diameter/2,A.y-diameter/2,diameter,diameter);
        }
        if(B!=null){        
            g.fillOval(B.x-diameter/2,B.y-diameter/2,diameter,diameter);
        }
        if(A!=null && B!=null){
            g.drawRect(A.x,A.y,B.x-A.x,B.y-A.y);
        }
    }
};

Ketika di run akan pada JFrame berikut ini

public class Demo1 {    
    public static void main(String[] args) {
        // TODO code application logic here
        System.loadLibrary(Core.NATIVE_LIBRARY_NAME);
        JFrame frame = new JFrame();
        Button button = new Button();    
        
        frame.setSize(new Dimension(500,500));
         
        frame.add(button);       
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLocationRelativeTo(null);
        frame.addComponentListener(new ComponentAdapter(){  
            @Override
            public void componentResized(ComponentEvent evt) {
                Dimension actualSize = frame.getContentPane().getSize();
                button.DIMENSION = actualSize;
            }
        });
        frame.setVisible(true);
    }
}

Hasilnya sebagai berikut

hemm.. tapi ada yang aneh ya, karena objek tersebut terkena skewing, tentu kita harus melakukan drawing polyline biar setiap titik/ujung corner membentuk skewing seperti yang akan kita perbaiki berikut ini

Catatan:

Oiya Croping Image dengan Mouse Event pernah saya bahas menggunakan Python-OpenCV https://softscients.com/2022/01/02/mendapatkan-nilai-pixel-berdasarkan-event-click-mouse/

Polyline

untuk membuat gambar skewing, kita membutuhkan draw polyline. Jadi kita nanti mouse tidak perlu ditekan lagi tapi hanya mengarahkan titik yang dituju kemudian lakukan klik. Untuk lebih jelasnya bisa baca disini https://softscients.com/2022/05/22/perbaikan-deskewing-image/