image editing problem

[sambar89]

Hi, i've been taasked with creating a program that display and edits images (only simple things such as adding text / circles to the images and converting to grey scale). At the moment my program can open an image and then display it in a JPanel but i can't seem to apply any editing to them displayed image. I've tried reading through text books, the internet and even sought help from my tutor but it's all been futile. Any help would be much appretiated..

At the moment 've only including the code for converting the image to grey scale as that seemed the most straight forward in term of understanding how this code interacts with the displayed panel. Once again if anyone could help me id be very grateful.

import javax.imageio.ImageIO;
import javax.swing.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import java.awt.*;
import java.io.*;
import java.awt.Color;

public class PictureFrame extends JFrame implements ActionListener {

	BufferedImage img;
	BufferedImage displayImage;
	BufferedImage greyImage;
	BufferedImage annoImage;
	BufferedImage circImage;
	BufferedImage zoomImage;
	BufferedImage invertImage;
	JButton getPictureButton;
	JButton textButton;
	JButton circleButton;
	JButton zoomButton;
	JButton greyButton;
	JButton invertButton;
	JButton saveButton;

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

	public PictureFrame(){
		this.setSize(900, 700);
		this.setTitle("Photo Album");
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

		JPanel picPanel = new PicturePanel();
		this.add(picPanel, BorderLayout.CENTER);           // add picture panel to frame and center

		JPanel buttonPanel = new JPanel();
		GridLayout buttonPanelLayout = new GridLayout(1, 6);
		buttonPanel.setLayout(buttonPanelLayout);
		getPictureButton = new JButton("Open image");            // Open picture Button
		getPictureButton.setActionCommand("open");
		getPictureButton.addActionListener(this);
		buttonPanel.add(getPictureButton);

		textButton = new JButton("Text");                        // Annotate button
		textButton.setActionCommand("text");
		textButton.addActionListener(this);
		buttonPanel.add(textButton);

		circleButton = new JButton("Circle");                   // Circle button
		circleButton.setActionCommand("circle");
		circleButton.addActionListener(this);
		buttonPanel.add(circleButton);

		zoomButton = new JButton("Zoom");                       // Zoom button
		zoomButton.setActionCommand("zoom");
		zoomButton.addActionListener(this);
		buttonPanel.add(zoomButton);

		greyButton = new JButton("Grey");                        // Grey button
		greyButton.setActionCommand("grey");
		greyButton.addActionListener(this);
		buttonPanel.add(greyButton);

		invertButton = new JButton("Invert");                   // Invert button
		invertButton.setActionCommand("invert");
		invertButton.addActionListener(this);
		buttonPanel.add(invertButton);

		saveButton = new JButton("Save");                     // Save button
		saveButton.setActionCommand("save");
		saveButton.addActionListener(this);
		buttonPanel.add(saveButton);
		this.add(buttonPanel, BorderLayout.SOUTH);

		this.setVisible(true);
	}

	public void actionPerformed(ActionEvent e){           // 

		if ((e.getActionCommand()).equals("open")){	
			String file = getImageFile();
			if(file != null){

				try {
	         		img = ImageIO.read(new File(file));
					Graphics2D g = img.createGraphics();
					g.drawImage(img, 0, 0, null);  
					g.dispose();  
					this.repaint(); 
					
					
				} catch (Exception E) {					
					E.printStackTrace();
				}


				

				/*	Toolkit kit = Toolkit.getDefaultToolkit();
			    img = kit.getImage(file);
			    img = img.getScaledInstance(700, -1, Image.SCALE_SMOOTH); */
				this.repaint();
			}



		}


		else if ((e.getActionCommand()).equals("text")){

		}
		else if ((e.getActionCommand()).equals("circle")){

		}
		else if ((e.getActionCommand()).equals("zoom")){

		}
		else if ((e.getActionCommand()).equals("grey")){
			BufferedImage greyImage = new BufferedImage(WIDTH, HEIGHT,          //code for converting to greyscale.. 
					BufferedImage.TYPE_BYTE_GRAY);  
			greyImage = (BufferedImage) img;
			Graphics g = greyImage.getGraphics();  
			g.drawImage(greyImage, 0, 0, this);  
			g.dispose();  
		}
		else if ((e.getActionCommand()).equals("invert")){
			

		}
		else if ((e.getActionCommand()).equals("save")){

		}
	}

	private String getImageFile(){
		JFileChooser fc = new JFileChooser();
		fc.setFileFilter(new ImageFilter());
		int result = fc.showOpenDialog(null);
		File file = null;
		if(result == JFileChooser.APPROVE_OPTION){
			file = fc.getSelectedFile();
			return file.getPath();
		}
		else{
			return null;
		}
	}

	private class PicturePanel extends JPanel{      // define panel to display picture 
		public void paint(Graphics g){
			g.drawImage(img, 0, 0, this);
		}
	}

	private class ImageFilter extends javax.swing.filechooser.FileFilter{
		public boolean accept(File f){
			if(f.isDirectory()){
				return true;
			}
			String name = f.getName();
			if(name.matches("*.((.jpg)|(.gif)|(.png))")){
				return true;
			}
			else{
				return false;
			}
		}

		public String getDescription(){
			return "Image files (*.jpg, *.gif, *.png)";
		}
	}

  
	
	
}

[Norm]

creating a program that display and edits images (only simple things such as adding text / circles to the images

You can do that by overriding the paintComponent method and adding code there to add text and draw shapes over the top of the image.

[sambar89]

Cheers.. so do i wan't to put the code in this method..

 private class PicturePanel extends JPanel{      // define panel to display picture
        public void paint(Graphics g){
            g.drawImage(img, 0, 0, this);
        }
    }

Then use if else statements for each button?

[Norm]

You should override the paintComponent method for Swing components.

Then use if else statements for each button?

What does that mean?
How do if statements relate to buttons?
Buttons are GUI components that are displayed.
if statements control the execution flow.

[sambar89]

Sorry I explained that pretty poorly. I'm basically trying to under stand why the statements in the actionPerformed method don't work.

So far instance.. why doesn't this code convert the image to greyscale and display it in the JPanel

else if ((e.getActionCommand()).equals("grey")){
			BufferedImage greyImage = new BufferedImage(WIDTH, HEIGHT,  
					BufferedImage.TYPE_BYTE_GRAY);  
			greyImage = (BufferedImage) img;
			Graphics g = greyImage.getGraphics();  
			g.drawImage(greyImage, 0, 0, this);  
			g.dispose();  
		}

[Norm]

The code creates a BufferedImage object: greyImage, draws on it and then loses it when the execution exits the {} block. If you want to save that image and later draw it to the GUI, you need to define it outside of the {}s.
Then you will need to draw it from within a paintComponent method using the Graphics object passed to the paint method.

Why do you call the BufferedImage constructor and then immediately reassign the greyImage variable to img. The call to the constructor is gone.

Wnat is the contents of img when the above code finishes?

You need to post a SSCCE. These small bits of code don't show what your code is doing.

[sambar89]

Okay cheers, should i create a new threat for it? Explaing exactly what's happening with my code. what my problem is etc.. or should i just stick it in this one?

[Norm]

If its a continuation of the same problem, put it here.

[sambar89]

Okay, so here's a revised version of my problem, hopefully i will explain everything a little better... So I have to create a program that will dispay an image (Selected from a JFileChooser) and then let the user do various editing on it. At the moment my code includes the buttons I need but the code for actually generating these effects is not bar the convert to grey scale. At the moment I can select and display an image but the clicking the grey scale button does not work, nothing happens when this is clicked. In the method 'ActionPerformed()' i've decleared several 'else if' statements for each individual button, now im assuming i either need to create a seperate method for that particular event and call it in the relevent else if statement? To be honest Java is not my speciality but unfortunately I need to learn it, I do have several books (Java Gently, Sams teach yourself in 21 days, Java for Dummies) but none of these seem to really help, so If anyone could explain it perhaps in easy terms or relative to my code i would be incredibly grateful. I hope this explains my problem better. Thank you!

Here is my code, it's all there is to compile and run what i've managed so far.

import javax.imageio.ImageIO;
import javax.swing.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import java.awt.*;
import java.io.*;
import java.awt.Color;

public class PictureFrame extends JFrame implements ActionListener {

	BufferedImage img;
	BufferedImage displayImage;
	BufferedImage greyImage;
	BufferedImage annoImage;
	BufferedImage circImage;
	BufferedImage zoomImage;
	BufferedImage invertImage;
	JButton getPictureButton;
	JButton textButton;
	JButton circleButton;
	JButton zoomButton;
	JButton greyButton;
	JButton invertButton;
	JButton saveButton;

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

	public PictureFrame(){
		this.setSize(900, 700);
		this.setTitle("Photo Album");
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

		JPanel picPanel = new PicturePanel();
		this.add(picPanel, BorderLayout.CENTER);           // add picture panel to frame and center

		JPanel buttonPanel = new JPanel();
		GridLayout buttonPanelLayout = new GridLayout(1, 6);
		buttonPanel.setLayout(buttonPanelLayout);
		getPictureButton = new JButton("Open image");            // Open picture Button
		getPictureButton.setActionCommand("open");
		getPictureButton.addActionListener(this);
		buttonPanel.add(getPictureButton);

		textButton = new JButton("Text");                        // Annotate button
		textButton.setActionCommand("text");
		textButton.addActionListener(this);
		buttonPanel.add(textButton);

		circleButton = new JButton("Circle");                   // Circle button
		circleButton.setActionCommand("circle");
		circleButton.addActionListener(this);
		buttonPanel.add(circleButton);

		zoomButton = new JButton("Zoom");                       // Zoom button
		zoomButton.setActionCommand("zoom");
		zoomButton.addActionListener(this);
		buttonPanel.add(zoomButton);

		greyButton = new JButton("Grey");                        // Grey button
		greyButton.setActionCommand("grey");
		greyButton.addActionListener(this);
		buttonPanel.add(greyButton);

		invertButton = new JButton("Invert");                   // Invert button
		invertButton.setActionCommand("invert");
		invertButton.addActionListener(this);
		buttonPanel.add(invertButton);

		saveButton = new JButton("Save");                     // Save button
		saveButton.setActionCommand("save");
		saveButton.addActionListener(this);
		buttonPanel.add(saveButton);
		this.add(buttonPanel, BorderLayout.SOUTH);

		this.setVisible(true);
	}

	public void actionPerformed(ActionEvent e){           // 

		if ((e.getActionCommand()).equals("open")){	
			String file = getImageFile();
			if(file != null){

				try {
	         		img = ImageIO.read(new File(file));
					Graphics2D g = img.createGraphics();
					g.drawImage(img, 0, 0, null);  
				//	g.dispose();  
					this.repaint(); 
					
					
				} catch (Exception E) {					
					E.printStackTrace();
				}


				

				/*	Toolkit kit = Toolkit.getDefaultToolkit();
			    img = kit.getImage(file);
			    img = img.getScaledInstance(700, -1, Image.SCALE_SMOOTH); */
				this.repaint();
			}



		}


		else if ((e.getActionCommand()).equals("text")){

		}
		else if ((e.getActionCommand()).equals("circle")){

		}
		else if ((e.getActionCommand()).equals("zoom")){

		}
		else if ((e.getActionCommand()).equals("grey")){
			BufferedImage greyImage = new BufferedImage(WIDTH, HEIGHT,  
					BufferedImage.TYPE_BYTE_GRAY);  
			Graphics g = greyImage.getGraphics();  
			g.drawImage(greyImage, 0, 0, this);  
			g.dispose(); 
			this.repaint();
		}
		else if ((e.getActionCommand()).equals("invert")){
			

		}
		else if ((e.getActionCommand()).equals("save")){

		}
	}

	private String getImageFile(){
		JFileChooser fc = new JFileChooser();
		fc.setFileFilter(new ImageFilter());
		int result = fc.showOpenDialog(null);
		File file = null;
		if(result == JFileChooser.APPROVE_OPTION){
			file = fc.getSelectedFile();
			return file.getPath();
		}
		else{
			return null;
		}
	}

	private class PicturePanel extends JPanel{      // define panel to display picture 
		public void paint(Graphics g){
		 g.drawImage(img, 0, 0, this);
		   
			
			
		}
	}

	private class ImageFilter extends javax.swing.filechooser.FileFilter{
		public boolean accept(File f){
			if(f.isDirectory()){
				return true;
			}
			String name = f.getName();
			if(name.matches("*.((.jpg)|(.gif)|(.png))")){
				return true;
			}
			else{
				return false;
			}
		}

		public String getDescription(){
			return "Image files (*.jpg, *.gif, *.png)";
		}
	}

  
	
	
}

[zweibieren]

Where in this code does the original image get converted?

BufferedImage greyImage = new BufferedImage(WIDTH, HEIGHT, 
                    BufferedImage.TYPE_BYTE_GRAY); 
            Graphics g = greyImage.getGraphics(); 
            g.drawImage(greyImage, 0, 0, this); 
            g.dispose();
            this.repaint();

Indeed, the drawImage line is problematical. Operations with g are drawing onto greyImage, so this line is saying to draw greyImage on itself!? It would make more sense to draw img onto greyImage.

See Convert a Color Image to a Gray Scale Image in Java - Code Beach

[Norm]

What are the values of WIDTH and HEIGHT?
What are you drawing here: g.drawImage(greyImage, 0, 0, this);

You should override paintComponent not paint and call the super version of the method.

[sambar89]

Okay, so i'm trying a new way of thinking, which in my mind seems to have potential. Rather than dealing with different variables of the type BufferedImage, would it be better to declare and array of BufferedImages... then when I intially open and display the first image it can be placed in the first index of the array, then any further editing of this image can be applied to the image in this first index and then place in subsequent indicies?

[Norm]

An array or list is useful if you want to have more than one version of the image around.

[sambar89]

Say i've declared a BufferedImage array

BufferedImage imgArray[] = new BufferedImage[20]

Then in imgArray[0] i've placed the image that user has selected to open,


Would the following code then declare imgArray[1] with the parameters (700, 400, BufferedImage.TYPE_BYTE_GRAY) then place the image in imgArray[0] into imgArray[1] with those parameters or will it just be over written? If so how would i go about doing this?

imgArray[1] = new BufferedImage(700, 400, BufferedImage.TYPE_BYTE_GRAY);
imgArray[1] = imgArray[0];

[Norm]

it just be over written

how would i go about doing this

Draw the image at [0] using the graphics associated with image at [1] created using the parameters (700, 400, BufferedImage.TYPE_BYTE_GRAY)
Perhaps something like this:

            Graphics g = image[1].getGraphics(); 
            g.drawImage(image[0], 0, 0, this);