Saving a Jpanel as a JPEG

[Nick Austin]

Hi Guys

I m currently writing an application which is my own version of MS Paint

My main functionality is there: drawing rectangles, lines, text etc...

The problem i have is that when attempting to save the file as a JPEG, the file outputted only displays the background from my JPanel, not anything i draw ontop of it

The code i am using is as follows;

drawing my rect onto my JPanel

  g2.drawRect(drawX,drawY,OrWidth,OrHeight);  

Saving the JPanel as image

   

int w = drawPanel.getWidth(), h = drawPanel.getHeight();
        BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = image.createGraphics();
        drawPanel.paint(g);

        g.drawImage(image, h, h, drawPanel);

        //g.drawi

        g.dispose();
        try{
        ImageIO.write(image, "jpeg", new File("X.jpeg"));
        }catch(IOException e){

        }

As i mentioned, the file saves OK, and if i change the background colour, the file will just have the background colour, with none of the pictures draw on top of it, any help will be appricated greatly

Thanks Nick Austin

[Darryl Burke]

You paint the panel to the image and then drawImage the image to itself? That can't be right. Get rid of this line

g.drawImage(image, h, h, drawPanel);

[Nick Austin]

Thanks for your reply

i have taken the line out, the code now reads

    

int w = drawPanel.getWidth(), h = drawPanel.getHeight();
        BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);

        Graphics g = image.getGraphics();

        drawPanel.print(g);

        g.dispose();

        try{
        ImageIO.write(image, "jpeg", new File("X.jpeg"));
        }catch(IOException e){

        }

Still only saves the image as the background, not with any shapes drawn on top of it, any ideas on this?

Thanks alot Nick

[Nick Austin]

Ive tried everything, but all i can save is the background, WHY WHY WHY ??? is the forground (ie, anything i draw on my panel) not saved when i atempt to save the image. It makes no sense what so ever, if its drawing it to screen, why is it not saving the image as a whole ???


Please any help would do, ive spent all most 48 hours trying to fix this with no luck

[pete stein]

To help us better see what is not working for you, I suggest that you create a small compilable and runnable program that we can use on our boxes at home to test and analyze and isolate the problem, an SSCCE

Luck

[Nick Austin]

thanks for the reply pete, i have made a scaled down version of my program for viewing, hopefully you can see where i am going wrong with the saving of the panel and any images drawn, rather than just a blank document being saved each time.

The code is long as it contains all my buttons / menus etc.

- Long meaningless code removed -

Hopefully from this you may be able to help

Thank again

Nick

[Rob Spoor]

That's not an SSCCE. Short, perhaps. self contained, probably. Correct, definitely not. There are over 100 errors when I try to compile that piece of code (after adding the missing trailing }).

[Mike Daly]

The errors are all from missing declarations of type for the Components he adds in the initComponents() method. it compiles after that but good luck trying to sort through the resulting confusion, Hardly any of the functionality is implemented.

[Nick Austin]

sorry for the confusion guys

the only functionality i have implemented is to draw a line onto my panel, then when the butto is pressed save the panel (now with line on)

the problem i keep having is that the saved file only saves the bkground and no line, or any other image when i draw a rect / oval

the output is a blank image file, with the colour of the bkground...

thank you all for looking at it though

[Michael Dunn]

Graphics g = jPanel3.getGraphics();//wrong

do your painting the correct way and the code works fine - image of panel with drawn line is saved

[pete stein]

Nick Austin wrote:thanks for the reply pete, i have made a scaled down version of my program for viewing, hopefully you can see where i am going wrong with the saving of the panel and any images drawn, rather than just a blank document being saved each time.

The code is long as it contains all my buttons / menus etc.

Ouch! Please post shorter but compilable code.

[Nick Austin]

- Graphics g = jPanel3.getGraphics();//wrong

This may be wrong but any hints / tips to point me in the right direction would be very much appriciated

I have been staring at my screen for so long i cant get my head around it, it has compltly stumped me

Thanks again

[Michael Dunn]

start here

http://java.sun.com/docs/books/tutorial/uiswing/painting/index.html

had you posted a small compilable program, I could have added the extra for you.
you didn't, so I can't.

all you needed to post was a frame with panel and button, and the 2 listeners (totals < 70 lines)

[Nick Austin]

i do apologise for bing a bit slow tody, has been a very long weekend, i have now scaled down the sample prog, from this i hope you can make sense (ignoring the generated code for layout)

    

package javaapplication1;

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

public class painting extends javax.swing.JFrame {

    int myx = 0;
    int myy = 0;

    int mypx = 0;
    int mypy = 0;
    
    public painting() {
        initComponents();
    }
    
    @SuppressWarnings("unchecked")
    
    private void initComponents() {

        buttonPanel = new javax.swing.JPanel();
        mySaveButton = new javax.swing.JButton();
        myDrawPanel = new javax.swing.JPanel();

        setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);

        mySaveButton.setText("Save");
        mySaveButton.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                mySaveButtonActionPerformed(evt);
            }
        });

        javax.swing.GroupLayout buttonPanelLayout = new javax.swing.GroupLayout(buttonPanel);
        buttonPanel.setLayout(buttonPanelLayout);
        buttonPanelLayout.setHorizontalGroup(
            buttonPanelLayout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGroup(buttonPanelLayout.createSequentialGroup()
                .addContainerGap()
                .addComponent(mySaveButton)
                .addContainerGap(17, Short.MAX_VALUE))
        );
        buttonPanelLayout.setVerticalGroup(
            buttonPanelLayout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGroup(buttonPanelLayout.createSequentialGroup()
                .addContainerGap()
                .addComponent(mySaveButton)
                .addContainerGap(266, Short.MAX_VALUE))
        );

        myDrawPanel.addMouseListener(new java.awt.event.MouseAdapter() {
            public void mousePressed(java.awt.event.MouseEvent evt) {
                myDrawPanelMousePressed(evt);
            }
            public void mouseReleased(java.awt.event.MouseEvent evt) {
                myDrawPanelMouseReleased(evt);
            }
        });

        javax.swing.GroupLayout myDrawPanelLayout = new javax.swing.GroupLayout(myDrawPanel);
        myDrawPanel.setLayout(myDrawPanelLayout);
        myDrawPanelLayout.setHorizontalGroup(
            myDrawPanelLayout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGap(0, 298, Short.MAX_VALUE)
        );
        myDrawPanelLayout.setVerticalGroup(
            myDrawPanelLayout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGap(0, 300, Short.MAX_VALUE)
        );

        javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
        getContentPane().setLayout(layout);
        layout.setHorizontalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGroup(layout.createSequentialGroup()
                .addComponent(buttonPanel, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
                .addGap(18, 18, 18)
                .addComponent(myDrawPanel, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE))
        );
        layout.setVerticalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addComponent(buttonPanel, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
            .addComponent(myDrawPanel, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
        );

        pack();
    }

    private void myDrawPanelMousePressed(java.awt.event.MouseEvent evt) {
        mypx = evt.getX();
        mypy = evt.getY();
    }

    private void myDrawPanelMouseReleased(java.awt.event.MouseEvent evt) {
        myx = evt.getX();
        myy = evt.getY();

        Graphics g = myDrawPanel.getGraphics();

        g.drawLine(mypx, mypy, myx, myy);
    }

    private void mySaveButtonActionPerformed(java.awt.event.ActionEvent evt) {
        int w = myDrawPanel.getWidth(), h = myDrawPanel.getHeight();
        BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
        Graphics g = image.getGraphics();
        myDrawPanel.print(g);
        g.dispose();
        try{
        ImageIO.write(image, "jpeg", new File("myImageFile.jpeg"));
        }catch(IOException e){

        }
    }

    
    public static void main(String args[]) {
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                new painting().setVisible(true);
            }
        });
    }
    
    private javax.swing.JPanel buttonPanel;
    private javax.swing.JPanel myDrawPanel;
    private javax.swing.JButton mySaveButton;   

}

sorry for all the confusion, i do hope you can aid me in solving this problem

Thanks Nick

[Michael Dunn]

close enough, changes/comments in the code

    
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;

class painting extends javax.swing.JFrame {
    int myx = 0;
    int myy = 0;
    int mypx = 0;
    int mypy = 0;
    public painting() {
        initComponents();
    }
    private void initComponents() {
        //buttonPanel = new javax.swing.JPanel();//not needed
        mySaveButton = new javax.swing.JButton();
        //myDrawPanel = new javax.swing.JPanel();//see below override
        myDrawPanel = new javax.swing.JPanel(){
          public void paintComponent(Graphics g){
            super.paintComponent(g);//clears old lines etc
            g.drawLine(mypx, mypy, myx, myy);//<---moved to here
          }
        };
        setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
        mySaveButton.setText("Save");
        mySaveButton.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                mySaveButtonActionPerformed(evt);
            }
        });
        myDrawPanel.addMouseListener(new java.awt.event.MouseAdapter() {
            public void mousePressed(java.awt.event.MouseEvent evt) {
                myDrawPanelMousePressed(evt);
            }
            public void mouseReleased(java.awt.event.MouseEvent evt) {
                myDrawPanelMouseReleased(evt);
            }
        });
        getContentPane().add(myDrawPanel);//<---these two lines instead of GroupLayout, which has nothing to do with problem
        getContentPane().add(mySaveButton,BorderLayout.SOUTH);
        setSize(600,400);
        setLocationRelativeTo(null);
    }
    private void myDrawPanelMousePressed(java.awt.event.MouseEvent evt) {
        mypx = evt.getX();
        mypy = evt.getY();
    }
    private void myDrawPanelMouseReleased(java.awt.event.MouseEvent evt) {
        myx = evt.getX();
        myy = evt.getY();
        //Graphics g = myDrawPanel.getGraphics();//never,never,never
        //g.drawLine(mypx, mypy, myx, myy);//transferred to paintComponent
        myDrawPanel.repaint();//<---------------------------------------------this triggers a redraw, using new co-ords
    }
    private void mySaveButtonActionPerformed(java.awt.event.ActionEvent evt) {
        int w = myDrawPanel.getWidth(), h = myDrawPanel.getHeight();
        BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
        Graphics g = image.getGraphics();
        myDrawPanel.print(g);
        g.dispose();
        try{
        ImageIO.write(image, "jpeg", new File("myImageFile.jpeg"));
        }catch(IOException e){
        }
    }
    public static void main(String args[]) {
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                new painting().setVisible(true);
            }
        });
    }
    private javax.swing.JPanel buttonPanel;
    private javax.swing.JPanel myDrawPanel;
    private javax.swing.JButton mySaveButton;
}

[Nick Austin]

Mate your a ledge, have finally got an image saved that matches that of the image on screen. Thanks for all your help.

You are going to hate me for asking this next question but, with the code provided the ability is there to draw a line, then when you draw another the first is removed.

I beileve this is because of this line.

    

super.paintComponent(g);   //clears old lines etc

when i remove the line of code, it allows me to draw multiple lines, but when i attempt to save now, i get a black screen with the last line drawn??

any tips to point me i nthe right direction?

Thanks again Nick

[Rob Spoor]

I'm moving this to our GUI forum.

[Rob Camick]

with the code provided the ability is there to draw a line, then when you draw another the first is removed.

Custom Painting Approaches.

While you are at it you may want to check out the ScreenImage class, which should answer your previous question.

[Michael Dunn]

maybe this is already in the link provided (haven't read the link),
but these would be the steps.

create a class (say) Line, that has 4 x int parameters in its constructor
the parameters are the x,y of mousePressed and of mouseReleased

    
class Line
{
  int x1,y1,x2,y2;
  public Line(int a1, int b1, int a2, int b2)
  {
    x1=a1;y1=b1;x2=a2;y2=b2;
  }
}

a class field Arraylist, call it (say) lines
java.util.List<Line> lines = new java.util.ArrayList<Line>();

in mouseReleased you add to 'lines' a new Line(...)

   
private void myDrawPanelMouseReleased(java.awt.event.MouseEvent evt) {
    myx = evt.getX();
    myy = evt.getY();
    lines.add(new Line(mypx,mypy,myx,myy));
    myDrawPanel.repaint();
}

in paintComponent you iterate 'lines', drawing each line

    
public void paintComponent(Graphics g){
  super.paintComponent(g);
  for(int x = 0, y = lines.size(); x < y; x++)
  {
    Line line = lines.get(x);
    g.drawLine(line.x1, line.y1, line.x2,line.y2);
  }
}

[Nick Austin]

Once again many many thanks for the code, this has helped me immensly and i can now draw multiple lines on the screen and save the image as a Jpeg. Now one last question (honest) which i cannot for the life of me get my head around.

I have creaated my own rectangle class to allow the user to draw multiple rectangles.

I have also added a button that when clicked the status changes to rectangle, to allow them to draw that shape. My next problem encountered is that when the status is switched to rectangle, the lines are removed and the rectangles are only drawn, im sure its to do with calling the repaint method in the right place... but again cannot get my head around this..

any hints tips would be very much appriciated, the example of my code is as follows

    

              if (status == "line"){

                  for(int x = 0, y = lines.size(); x < y; x++)
                  {
                    Line line = lines.get(x);
                    g.drawLine(line.x1, line.y1, line.x2,line.y2);
                  }
              }

              if (status == "rect"){
                  for(int x = 0, y = rects.size(); x < y; x++)
                  {
                    Rect rect = rects.get(x);
                    g.drawRect(rect.x1, rect.y1, 20 ,20);

                  }
              }

Thanks again Nick

[Michael Dunn]

unlikely this is your problem
if (status == "line")

normally would be written as
if (status.equals("line"))

but why have the if()'s if you want all drawn?
you would need to iterate both 'lines' and 'rects'

[Rob Camick]

maybe this is already in the link provided (haven't read the link),

Multiple (working) solutions are provided. The one you suggested and one that makes solving the second question easier. Unless you understand the difference between the two, you don't know which solution is better to use.

But as usual, unless code is posted in the posting the OP doesn't bother to take a look.