320 likes | 427 Vues
Learn how to display and resize images in Java GUI using BufferedImage and ImageIcon. Understand image processing and maintain original image quality. Discover techniques to resize images without distortion or loss of quality. Follow step-by-step guidance on creating interactive photo browsers for seamless image viewing. This comprehensive tutorial covers essential topics for developing engaging Java applications with intuitive image display features.
E N D
F27SB2 Software Development 2 Lecture 10: Java GUIs 7
Displaying images • how to display images in a GUI? BufferedImage • from AWT • low level representation as array of pixels • image processing is complex Image • from AWT • displayable image • platform independent
Displaying images Icon • interface • from Swing • object that can draw a graphic of specified width/height at a specific location setIcon(Icon i) • place Icon on JComponent
Displaying images ImageIcon • implementation of Icon interface • uses an Image to draw an Icon ImageIcon(String filename) • constructs ImageIcon from image from a specified file • then set ImageIconon JComponent getImage() • returns Image fromImageIcon
Display single image • specify file name via main • display in JLabel in JFrame import javax.swing.*; import java.awt.*; import java.awt.event.*; class Photo1 extends JFrame { JLabel l;
Display single image Photo1() { setLayout(new GridLayout(1,1)); l = new JLabel("picture",JLabel.CENTER); l.setVisible(true); l.setOpaque(true); add(l); } void setPhoto(String s) { l.setIcon(new ImageIcon(s)); } }
Display single image class TestPhoto1 { public static void main(String [] args) { Photo1 p = new Photo1(); p.setSize(400,420); p.setVisible(true); p.setTitle("Photo1"); p.addWindowListener (new WindowAdapter() { public void windowClosing(WindowEvent e) {System.exit(0);}}); p.setPhoto(args[0]); } }
Display single image original image (EE5.jpg) display • original image not same size/shape as display • centre of image is displayed • no scaling/resizing
Resizing image getScaledInstance (intwidth,intheight,inthints) • resizes Image to be width*height • hints • determine how scaling is performed • we’ll use Image.SCALE_SMOOTH • NB direct scaling to dimensions of JComponentmay distort image if not same shape
Resizing image • want resized image to retain original dimensions • new image width/new image height = old image width/old image height • for given new image height: • new image width = new image height*old image width/old image height • for given new image width: • new image height = new image width*old image height/old image width
Resizing image JLabel Image 1 lh i1h lw i1w • image width/image height < JLabel width/JLabel height • new image height = JLabel height • new image width = JLabel height* image width/ • image height
Resizing image JLabel Image 2 i2h lh i2w lw • image width/image height > JLabel width/JLabel height • new image width = JLabelwidth • new image height = JLabelwidth*image height/ • image width
Resizing image import javax.swing.*; import java.awt.*; import java.awt.event.*; class Photo2 extends JFrame { JLabel l; Photo2() { setLayout(new GridLayout(1,1)); l = new JLabel("picture",JLabel.CENTER); l.setVisible(true); l.setOpaque(true); add(l); }
Resizing image void setPhoto(String s) { Image i1 = (new ImageIcon(s)).getImage(); intlw = l.getWidth(); intlh = l.getHeight(); intiw = i1.getWidth(this); intih = i1.getHeight(this); int w = lw; inth = lh; if(iw>lw){ w = lw; h = lh*ih/iw; } else if(ih>lh){ w = lw*iw/ih; h = lh; } Image i2 = i1.getScaledInstance(w,h,Image.SCALE_SMOOTH); l.setIcon(new ImageIcon(i2)); } }
Resizing image class TestPhoto2 { public static void main(String [] args) { Photo2 p = new Photo2(); p.setSize(400,420); p.setVisible(true); p.setTitle("Photo2"); p.addWindowListener (new WindowAdapter() { public void windowClosing(WindowEvent e) {System.exit(0);}}); p.setPhoto(args[0]); } }
Resizing image original image (EE5.jpg) display
Photo Browser • choose directory • scroll through images which are .jpg or .JPG JLabel file name < photo > JFrame JButton
Photo Browser ... class Browser extends JFrame implements ActionListener { JMenuBarjb; JMenu file; JMenuItemMNew,MOpen,MClose,MExit; JFileChooser files; JButtonleft,right; JLabel photo; JLabelfileName;
Photo Browser • maintain array of File for contents of chosen directory File [] directory; • keep track of current File in directory intcurrent;
Photo Browser Browser() { jb = new JMenuBar(); file = new JMenu("Picture"); MOpen = new JMenuItem("Open"); MOpen.addActionListener(this); file.add(MOpen); jb.add(file); setJMenuBar(jb); files = new JFileChooser();
Photo Browser • need file chooser which will only select directories • change file chooser mode setFileSelectionMode(intmode) mode: • DIRECTORIES_ONLY • FILES_AND_DIERCTORIES • FILES_ONLY
Photo Browser files.setFileSelectionMode (JFileChooser.DIRECTORIES_ONLY); Font f = new Font("Sans Serif",Font.BOLD,24); left = new JButton("<"); left.setFont(f); left.addActionListener(this); add(left,BorderLayout.WEST); photo = new JLabel(); add(photo,BorderLayout.CENTER);
Photo Browser right = new JButton(">"); right.setFont(f); right.addActionListener(this); add(right,BorderLayout.EAST); fileName = new JLabel("",JLabel.CENTER); fileName.setFont (new Font("Sans Serif",Font.PLAIN,18)); add(fileName,BorderLayout.NORTH); }
Photo Browser • directories may contain files of mixed type • check if file name ends with appropriate extension booleanendsWith(String s1,String s2) { int d = s1.length()-s2.length(); if(d<0)return false; for(int i = s2.length()-1;i>=0;i--) if(s1.charAt(i+d)!=s2.charAt(i)) return false; return true; } • built in String method endsWith(String s)
Photo Browser • require name & path information from File String getName() • returns file name in directory String getPath() • returns file path from root directory
Photo Browser booleancheckJPG(inti) { Image i1,i2; intph,pw,ih,iw; String name = directory[i].getName(); if(endsWith(name,".jpg") || endsWith(name,".JPG")) { String path = directory[i].getPath(); i1 = (new ImageIcon(path)).getImage(); ph = photo.getHeight(); pw = photo.getWidth(); ih = i1.getHeight(this); iw = i1.getWidth(this); int w = pw; int h = ph;
Photo Browser if(iw>ih) { w = pw; h = ph*ih/iw; } else if(ih>iw) { w = pw*iw/ih; h = ph; } i2 = i1.getScaledInstance (w,h,Image.SCALE_SMOOTH); photo.setIcon(new ImageIcon(i2)); current = i; fileName.setText(name); return true; } return false; }
Photo Browser • need list of directory contents from chooser selection File [] listFiles() • returns array of File from chooser • can then check each in turn to see if appropriate file type
Photo Browser public void doOpen() { int response = files.showOpenDialog(this); if(response==JFileChooser.APPROVE_OPTION) { File f = files.getSelectedFile(); directory = f.listFiles(); for(inti=0;i<directory.length;i++) if(checkJPG(i)) return; } }
Photo Browser public void doRight() { for(int i=current+1;i<directory.length;i++) if(checkJPG(i)) return; } public void doLeft() { for(int i=current-1;i>=0;i--) if(checkJPG(i)) return; }
Photo Browser public void actionPerformed(ActionEvent e) { if(e.getSource()==MOpen) doOpen(); else if(e.getSource()==left) doLeft(); else if(e.getSource()==right) doRight(); } } class TestBrowser{...}