Overwriting on a jpg in a Jpanel;

[Tau Slater]

I can write my JPanel to an image, and read that image and dislpay it to the JPanel, but can't draw more or "add" to that image when it's loaded. Do I need to use a bufferedimage or will a plain "image" be ok? I assume this is GUI related as the images load and save ok. Here's what happens ideally:

1. List of items chosen.
2. Picture drawn in DrawingPanel (extends JPanel) and saved by list index
3. When the list is loaded again, the picture comes up. User can draw on it and save it again if neccessary.
4. Picture saved again.

The trouble happens when the picture is loaded up a second time. I can either write pictures the the hdd, or read them and display them... Can't do the last step

How image is stored:

          
        storedImage = paintPanel.image;//create a buffered storedImage to save to disk.
        BufferedImage bufferedImage = new BufferedImage(storedImage.getWidth(null), storedImage.getHeight(null), BufferedImage.TYPE_INT_RGB);
        Graphics bG = bufferedImage.createGraphics();
        bG.drawImage(storedImage, 0, 0, null);
        bG.dispose();//Dispose of the graphics context after bufferedImage is created  

The paintComponent method in PaintPanel: (where the picture is drawn - PaintPanel is a nested class, in a JFrame.)

        public void paintComponent(java.awt.Graphics g) {
            super.paintComponent(g);

            if (image == null) {
                image = createImage(getWidth(), getHeight());
                g2d = (Graphics2D) image.getGraphics();
                g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
                g2d.setColor(Color.white);
                g2d.fillRect(0, 0, getWidth(), getHeight());
                g2d.setColor(Color.black);
            }

            Rectangle r = g.getClipBounds();
            g.drawImage(image, r.x, r.y, r.width + r.x, r.height + r.y,
                    r.x, r.y, r.width + r.x, r.height + r.y, null);
        }
    }

I have a feeling the paint method isn't set up to write over an existing picture? I know the jpg quality is going to deteriorate as well; I just want to be able to re-write over a jpg when it's loaded up and save the altered image.

[Craig Wood]

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.awt.image.BufferedImage;
import java.io.*;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.swing.*;

public class EditTest extends JPanel {
    BufferedImage image;
    boolean showImage = true;
    String imagePath = "editTest.png";
    Line2D.Double line = new Line2D.Double();
    Random seed = new Random();
    Color[] colors = {
        Color.red, Color.blue, Color.magenta, Color.cyan, Color.orange
    };
    Color color = colors[0];

    public EditTest() {
        initImage();
    }

    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
        if(showImage)
            g2.drawImage(image, 0, 0, this);
        g2.setPaint(color);
        g2.draw(line);
    }

    private void initImage() {
        int w = 200, h = 200;
        image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
        Graphics2D g2 = image.createGraphics();
        g2.setPaint(Color.white);
        g2.fillRect(0,0,w,h);
        g2.setPaint(Color.blue);
        g2.draw(new Rectangle2D.Double(w/16, h/16, w*7/8, h*7/8));
        g2.setPaint(Color.red);
        g2.draw(new Line2D.Double(0,0,w,h));
        g2.draw(new Line2D.Double(w,0,0,h));
        g2.setPaint(Color.green.darker());
        g2.draw(new Ellipse2D.Double(w/8, h/8, w*3/4, h*3/4));
        g2.dispose();
    }

    private void loadImage() {
        try {
            image = ImageIO.read(new File(imagePath));
        } catch(IOException e) {
            System.out.println("read error: " + e.getMessage());
        }
    }

    private void edit() {
        int w = image.getWidth();
        int h = image.getHeight();
        double x1 = seed.nextInt(w);
        double y1 = seed.nextInt(h);
        double x2 = seed.nextInt(w);
        double y2 = seed.nextInt(h);
        color = colors[seed.nextInt(colors.length)];
        line.setLine(x1, y1, x2, y2);
    }

    private void saveImage() {
        int w = image.getWidth();
        int h = image.getHeight();
        int type = BufferedImage.TYPE_INT_RGB;
        BufferedImage save = new BufferedImage(w, h, type);
        Graphics2D g2 = save.createGraphics();
        paint(g2);
        g2.dispose();
        try {
            ImageIO.write(save, "png", new File(imagePath));
        } catch(IOException e) {
            System.out.println("write error: " + e.getMessage());
        }
    }

    private JPanel getUIPanel() {
        String[] ids = { "load", "edit", "save" };
        ActionListener al = new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                String id = e.getActionCommand();
                if(id.equals("load")) {
                    loadImage();
                    showImage = true;
                }
                if(id.equals("edit")) {
                    edit();
                }
                if(id.equals("save")) {
                    if(showImage) {
                        saveImage();
                        showImage = false;
                        line.setLine(0,0,0,0);
                    }
                }
                repaint();
            }
        };
        JPanel panel = new JPanel();
        for(int i = 0; i < ids.length; i++) {
            JButton button = new JButton(ids[i]);
            button.setActionCommand(ids[i]);
            button.addActionListener(al);
            panel.add(button);
        }
        return panel;
    }

    public static void main(String[] args) {
        EditTest test = new EditTest();
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.add(test);
        f.add(test.getUIPanel(), "Last");
        f.setSize(400,300);
        f.setLocation(200,200);
        f.setVisible(true);
    }
}

[Tau Slater]

Thanks a lot Craig, I notice you're using a png file as well. I'd noticed some compression artefacts in my jpg when saved, as I'd gone with the default encoding settings and not played around with it on that front, but I think I'll play around with the formats and see what I can do.

Thanks again

[Tau Slater]

HAHA! Victory is mine! I've used some of your code Craig, but the important thing is I understand what was going on and why it didn't work. I *was* loading up the image but not creating a graphics context from it, so I used to be able to load an image and se eit, or draw one and not edit it... Fixed now - the heart of it was:

        @Override
        public void paintComponent(java.awt.Graphics g) {
            super.paintComponent(g);

            if (image == null) {
                image = new BufferedImage(getWidth(), getHeight(), BufferedImage.TYPE_INT_RGB);
                g2d = (Graphics2D) image.getGraphics();
                g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
                g2d.setPaint(Color.white);
                g2d.fillRect(0, 0, getWidth(), getHeight());
                g2d.setColor(colColour);
            }
            g.drawImage(image, 0, 0, getWidth(), getHeight(), rootPane);
            g2d = (Graphics2D) image.getGraphics();//Needed these lines here
            g2d.setColor(colColour);//and here to get the graphics context and set the colour to draw with.
        }
    }

Notably, I also didn't see this as I was at first drawing with a white colour on a white background. Sometimes even the simple things can catch you out eh?... On an asides, drawing and painting in Java is a real pain isn't it? Or is it just me? I mean I whacked a program together like this in C# on visual studio in half an hour... Oh well. I'm hardly a coding guru anyway. Thanks again for your help Craig