poor png image quality

[e_matthes]

Hello. I have a program which generates an image from mathematical
data, simply plotting points. When I save the images (drawings) as
png's using ImageIO.write, the saved images are not as clean as what I
see in the program. That is, when the program displays its output, the
dots representing the points are clean circles. When I open the saved
png files in photoshop, the dots are more jagged. I believe the
relevant bits of code are:

RenderedImage rendImage;
....
File pngFile = new File(fileName);
ImageIO.write(rendImage, "png", pngFile);
....
BufferedImage bImage = new BufferedImage(bIWidth, bIHeight,
BufferedImage.TYPE_INT_ARGB);
....
Graphics2D g2d = bImage.createGraphics();
....
plotter.drawPlot(g2d, xImageOffset, yImageOffset, "print");

Any thoughts on how to get a png file which more accurately captures
the clean screen images?

- Eric

 

[Oliver Wong]

Hello. I have a program which generates an image from mathematical
data, simply plotting points. When I save the images (drawings) as
png's using ImageIO.write, the saved images are not as clean as what I
see in the program. That is, when the program displays its output, the
dots representing the points are clean circles. When I open the saved
png files in photoshop, the dots are more jagged. I believe the
relevant bits of code are:

RenderedImage rendImage;
...
File pngFile = new File(fileName);
ImageIO.write(rendImage, "png", pngFile);
...
BufferedImage bImage = new BufferedImage(bIWidth, bIHeight,
BufferedImage.TYPE_INT_ARGB);
...
Graphics2D g2d = bImage.createGraphics();
...
plotter.drawPlot(g2d, xImageOffset, yImageOffset, "print");

Any thoughts on how to get a png file which more accurately captures
the clean screen images?

Can you produce an SSCCE that reproduces the problem?
http://mindprod.com/jgloss/sscce.html Perhaps reduce the application so that
it draws a single green dot on the screen and also saves it to file, so that
we may compare the screen output to the file output.

- Oliver

 

[e_matthes]

Thanks for the sscce link, and sorry for the poor code snippet. Here
is a self-contained program which reproduces the problem. I made a
series of dots rather than a single dot, because some dots write better
than others. In particular, many of the png dots have single pixels on
the outside of the circle edges. These look really distracting in the
final product. - Eric

import java.awt.*;
import javax.swing.*;
import java.awt.geom.*;
import java.awt.image.*;
import java.io.*;
import javax.imageio.*;

public class PNGWriteTester extends JFrame {

public PNGWriteTester() {

super("PNG Write Tester");
setSize(550, 200);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
DotPanel dPanel = new DotPanel();
add(dPanel);
setVisible(true);

writeFromBufferedImage(dPanel);

}

public void writeFromBufferedImage(DotPanel dotPanelIn) {

String fileName = "dotsFromBufferedImage.png";
BufferedImage bImage = new BufferedImage(550, 200,
BufferedImage.TYPE_INT_RGB);
Graphics2D g2d = bImage.createGraphics();
dotPanelIn.drawDots(g2d);

try {
File pngFile = new File(fileName);
ImageIO.write(bImage, "png", pngFile);
JOptionPane.showMessageDialog(null, "Successful png filewrite!");
} catch (IOException e) {
String errorMessage = "File write failed: " + e.toString();
JOptionPane.showMessageDialog(null, errorMessage);
}

}

public static void main(String[] arguments) {
PNGWriteTester writeTester = new PNGWriteTester();
}

}

class DotPanel extends JPanel {

public void paintComponent(Graphics comp) {
super.paintComponent(comp);
Graphics2D comp2D = (Graphics2D) comp;
drawDots(comp2D);
}

public void drawDots(Graphics2D compIn) {

Color backgroundColor = new Color(235, 235, 235);
compIn.setColor(backgroundColor);
compIn.fillRect(0, 0, 550, 200);
Color dotColor = new Color(0, 200, 0);
compIn.setColor(dotColor);

for (int i=5; i<20; i++) {
Ellipse2D.Float dot = new Ellipse2D.Float( 25*(i-4), 25, i, i);
compIn.fill(dot);
}

}

}

 

[Andrew Thompson]

Thanks for the sscce link, and sorry for the poor code snippet. Here
is a self-contained program which reproduces the problem.

<http://www.physci.org/test/screenshot/>
'green-dots.png' shows the output I am getting for your code,
but I cannot say that I notice a difference between the output
in the JPanel, and the output of the written image as shown
in the Win picture viewer behind it..

(Nice code example, BTW)

Andrew T.

 

[Knute Johnson]

<http://www.physci.org/test/screenshot/>
'green-dots.png' shows the output I am getting for your code,
but I cannot say that I notice a difference between the output
in the JPanel, and the output of the written image as shown
in the Win picture viewer behind it..

(Nice code example, BTW)

Andrew T.

I think what is happening is that you have anti-aliasing turned on on
your computer or when you run the GUI but the file is written without
AA. When I look at your GUI the image is pixelated(sp)with rough edges.
If I add anti-aliasing to your drawing code the image file looks nice
and smooth. Even money that's where you problem is.

 

[e_matthes]

'green-dots.png' shows the output I am getting for your code,
but I cannot say that I notice a difference between the output
in the JPanel, and the output of the written image as shown
in the Win picture viewer behind it..

Your output matches mine. It's a subtle difference, but there are
extra pixels on the png dots. Here's an output sample with some of the
jagged pixels pointed out, with an extra large dot at the end if it's
any easier to notice the jaggedness:

<http://www.wanderingphotographer.com/galleries/ak8/greenDotsComparison.htm>

It's a little nitpicky in this example maybe, but in the output for the
actual application I'm writing, the jaggedness looks quite
unprofessional. I am surprised by this because I've been reading that
png is a lossless format. Any thoughts?
- Eric

 

[Andrew Thompson]

<http://www.wanderingphotographer.com/galleries/ak8/greenDotsComparison.htm>

Sorry. My monthly download limit is too small to
be downloading huge screenshots like that.
Did you ever hear of *trimming*?

Andrew T.

 

[e_matthes]

Thank you, using anti-aliasing fixed the problem. And sorry about the
large screenshot.

Eric