How to avoid blur when Zooming a image? May be SVG could help?

[Jose Ariza]

I display an image(.png) in a container, actually in a JGraphx library's component called mxCell. But when I zoom in the image, it vagued. How to avoid this?
I did search and I found Batik may help because it uses SVG. So How should I Display a SVG format image in a container? And zoom won't make it blur.

[Piet Souris]

What kind of images are you working with? For normal pictures from a camera, enlargement, certainly if not too extreme, gives excellent results (see the standard Java classes like BufferedImageOp and its variants, in combination with RenderingHints).

If you have such an image, then SVG has two options: either the BitMap is simply incorporated in the SVG-file, in which case enlargement has the same problems, or the BitMap is converted into geometric figures like Lines and Bezier curves. Inkscape has such a facility, but I don't know how well that works.

If you yourself create images by drawing straight lines and such into, say, a BufferedImage, then you might as well create a Path, that works similar to SVG and scales without blurring. See the API.

[Jose Ariza]

Piet Souris wrote:What kind of images are you working with? For normal pictures from a camera, enlargement, certainly if not too extreme, gives excellent results (see the standard Java classes like BufferedImageOp and its variants, in combination with RenderingHints).

If you have such an image, then SVG has two options: either the BitMap is simply incorporated in the SVG-file, in which case enlargement has the same problems, or the BitMap is converted into geometric figures like Lines and Bezier curves. Inkscape has such a facility, but I don't know how well that works.

If you yourself create images by drawing straight lines and such into, say, a BufferedImage, then you might as well create a Path, that works similar to SVG and scales without blurring. See the API.

Thanks for answering.
Actually, I stored a png image under resource folder of the project, and I used it with a third party library called JGraphx, like this

iconStyle2.put(mxConstants.STYLE_IMAGE, "/resource/logo-md.png");

The pic is 16 * 16 pixels, so it got blurring when I zoom the graph(Panel). So in your way, I should convert the pic into BufferedImage first by java, and reuse it. Am I understand right?

[Piet Souris]

No, that won't help.

You see, if you have that 16x16 icon and you enlarge it, then extra pixels must be invented, somehow, but that will always lead to some loss of quality. You can try to convert that icon into a genuine SVG, meaning it will somehow convert the pixels into scalable Lines and Circles and such, but how well such a conversion works is uncertain. Try it out with Inkscape, if you can.

The alternative I was talking about, is to create your icon in terms of Lines, Circles, Moves and Curves, by creating a Path (see the API for the possibilities). If you draw that Path into say a BufferedImage, you can set the scale of the Graphics2D object to any size, and you can draw next without any distorsion. But this requires some knowledge and experience.

Another possibility is to have your icon at different sizes, for instance 16 x 16, 32 x 32, et cetera, if that is possible. Then if you need the icon at a certain size, pick the icon that has closest resolution, so that scaling will be kept to a minimum.

[Jose Ariza]

Simply the third way won't achieve, cause I don't have multiple icons  
But I will try the other two, Especially SVG way. Thank you very much!!!

[Stephan van Hulst]

I see that the JGraphX library has a com.mxgraph.shape package. Can you compose your symbols from shapes in that package?

[Jose Ariza]

Stephan van Hulst wrote:I see that the JGraphX library has a com.mxgraph.shape package. Can you compose your symbols from shapes in that package?

I apply the image to a mxCell in JGraphx by style. This means I should define the style that mxCell used. It's Something like this

Hashtable<String, Object> iconStyle1 = new Hashtable<String, Object>();
iconStyle1.put(mxConstants.STYLE_SHAPE, mxConstants.SHAPE_IMAGE);
iconStyle1.put(mxConstants.STYLE_IMAGE, "/resource/icon/porte_et.png");
iconStyle1.put(mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_CENTER);

So,the STYLE_SHAPE is image. I don't know Can I compose a image by shape. And how to store the new image in project.
So, I'll have a try.
Thanks for the reply.

[Piet Souris]

It might be creating a genuine SVG, this way, or it might be generating a bitmap. I don't know that library, but I will take a look at it. Keep us informed aout your findings!

[Jose Ariza]

Piet Souris wrote:It might be creating a genuine SVG, this way, or it might be generating a bitmap. I don't know that library, but I will take a look at it. Keep us informed aout your findings!

OK! I'm glad to offer you a simple SSCCE. btw, I found Batik or JFreeSVG could convert png to SVG.

package jgraphx;

import java.awt.BorderLayout;
import java.awt.EventQueue;
import java.awt.event.MouseWheelEvent;
import java.awt.event.MouseWheelListener;
import java.util.Hashtable;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;

import com.mxgraph.model.mxCell;
import com.mxgraph.swing.mxGraphComponent;
import com.mxgraph.util.mxConstants;
import com.mxgraph.view.mxGraph;
import com.mxgraph.view.mxStylesheet;

public class IconExample extends JFrame {

	private JPanel contentPane;

	/**
	 * Launch the application.
	 */
	public static void main(String[] args) {
		EventQueue.invokeLater(new Runnable() {
			public void run() {
				try {
					IconExample frame = new IconExample();
					frame.setVisible(true);
				} catch (Exception e) {
					e.printStackTrace();
				}
			}
		});
	}

	/**
	 * Create the frame.
	 */
	public IconExample() {
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setBounds(100, 100, 450, 300);
		contentPane = new JPanel();
		contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
		contentPane.setLayout(new BorderLayout(0, 0));
		setContentPane(contentPane);
		initGraph();
	}
	
	private void initGraph(){
		//define style.use for vertex(node) or edge(line).both them called mxCell
		Hashtable<String, Object> iconStyle = new Hashtable<String, Object>();
		iconStyle.put(mxConstants.STYLE_SHAPE, mxConstants.SHAPE_IMAGE);
		iconStyle.put(mxConstants.STYLE_IMAGE, "/resource/logo-md.png");//replace this image to your owns
		iconStyle.put(mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_CENTER);
		
		mxGraph graph = new mxGraph();
		mxStylesheet stylesheet = graph.getStylesheet();
		stylesheet.putCellStyle("MY_STYLE", iconStyle);
		
		//draw graph
		Object parent = graph.getDefaultParent();
		graph.getModel().beginUpdate();
		try{
			mxCell v3 = (mxCell)graph.insertVertex(parent, null, "Hello", 10, 10, 80, 30, "MY_STYLE");
		}finally{
			graph.getModel().endUpdate();
		}
		//add it to the JPanel
		mxGraphComponent graphComponent = new mxGraphComponent(graph);
		contentPane.add(graphComponent);
		
		//add listener for zoom
		graphComponent.getGraphControl().addMouseWheelListener(new MouseWheelListener(){
			@Override
			public void mouseWheelMoved(MouseWheelEvent arg0) {
				int notches = arg0.getWheelRotation();
				if(notches < 0){
					graphComponent.zoomIn();
				}else{
					graphComponent.zoomOut();
				}
			}
		});
	}

}

[Piet Souris]

It took me some trouble (including NetBeans crashing), but I downloaded JGraphX and got your code up and running.
Unfortunately, it refused to load my png. I replaced your line

iconStyle.put(mxConstants.STYLE_IMAGE, "/resource/logo-md.png");//replace this image to your owns

with this line:

iconStyle.put(mxConstants.STYLE_IMAGE, "D:\\Syls bestanden\\bezier_0.png");

but I get a Severe Error that it can't load the file. According to the output console I see this error:

jan 30, 2018 10:25:27 PM com.mxgraph.util.mxUtils loadImage
SEVERE: Failed to load image from D:\Syls bestanden\bezier_0.png

Looking at  'com.mxgraph.util.mxUtils loadImage' I see this code:

public static BufferedImage loadImage(String url)
	{
		BufferedImage img = null;

		if (url != null)
		{
			// Parses data URIs of the form data:image/format;base64,xxx
			if (url.startsWith("data:image/"))
			{
				try
				{
					int comma = url.indexOf(',');
					byte[] data = mxBase64.decode(url.substring(comma + 1));
					ByteArrayInputStream is = new ByteArrayInputStream(data);
					img = ImageIO.read(is);
				}
				catch (Exception e)
				{
					log.log(Level.SEVERE, "Failed to load a data URI image", e);
				}
			}
			else
			{
				URL realUrl = null;

				try
				{
					realUrl = new URL(url);    // here is where I get an error, it seems my path is not accepted as a genuine URL,. will look into that.
				}
				catch (Exception e)
				{
					realUrl = mxUtils.class.getResource(url);   // so end up in here, where realUrl is still null
				}

				if (realUrl != null)
				{
					try
					{
						img = ImageIO.read(realUrl);    // this is the important thing: a BitMap is created (a BufferedImage)  => scaling problems
					}
					catch (Exception e1)
					{
						log.log(Level.SEVERE, "Failed to read the image from " + realUrl, e1);
					}
				}
				else
				{
					log.log(Level.SEVERE, "Failed to load image from " + url);   // and so this is reported.
				}
			}
		}

		return img;
	}

Well, I commented what I could find out.

Important is that your image is loaded into a BufferedImage and so you will have scaling problems. I'll try to fix my URL problem and see if there is a way to convert the image into a genuine SVG, and whether JGraphX can handle such a file. But it is getting a little late over here, so I hope I have time tomorrow. Meanwhile see if you can convert your png into a rel SVG. Wonder what result that will give.

[Jose Ariza]

I checked API doc for mxConstants.STYLE_IMAGE, there's something like this

Defines the key for the image style. Possible values are any image URL, registered key in mxImageResources or short data URI as defined in mxImageBundle. The type of the value is String.

So the picture on your disk can't be a URL, while a picture on the Internet could.
So, you can load pic from Internet like this

iconStyle.put(mxConstants.STYLE_IMAGE, "http://images.all-free-download.com/images/graphicthumb/beautiful_the_outskirts_scenery_picture_2_165896.jpg");

Or, you can put your bezier png under your project, for example, new a folder(resource) in your project, and put the picture there.

iconStyle.put(mxConstants.STYLE_IMAGE, "/resource/redondence.png");

If you still want to load a picture from your disk, it's should be a URI path, like this,

iconStyle.put( mxConstants.STYLE_IMAGE, "file:\\D:\\Syls bestanden\\bezier_0.png");

see answers in this web.

[Piet Souris]

Thanks for the info. I used

URL url = null;
try {
    Path p = Paths.get("D:\\Syls bestanden\\bezier_0.png");
    url = p.toUri().toURL();
}
catch(MalformedURLException e) {
    System.out.println("Malformed URL!!!");
}
iconStyle.put(mxConstants.STYLE_IMAGE, url);//replace this image to your owns

Well, my image has a much larger resolution, and so it scales without noticable distortion from initially very small to the full size. So, my advice for now is: if your logo is not too complicated, recreate it to a much larger size (if the png is getting too large, try jpg).
Still to try: how does JGraphX react to an svg file. Have you made any progress with this?

[Jose Ariza]

yes, I did some search works, but without a clear answer yet. I'm going to do further searching later cause I have to do some work...
Thanks for replying me so much ( a nice forum). If I have any progress I will post my resolution to you.  

[Tim Holloway]

There's basically 3 types of image formats.

1. Bitmap formats. For example, Window bitmap (BMP) files and TIFF files. These tend to look awful when scaled. TIFF (Tagged Image Format) is used for embedded bitmap graphics in PDF files. It's a run-length encoding originally used by FAX machines.

2. Lossy-compression formats like PNG and JPEG. They scale better, but tend to blur.

3. Scalable formats. Stuff like SVG (which stands for Scalable Vector Graphics) or PostScript. Other stuff like object drawing types (DXF). These scale very cleanly, but are best suited for line-art objects. Photographic-style parts of an SVG image will be held in a data chunk in format 1 or 2.

For schematic symbols, SVG is indeed a good option, where available. The main thing you need is a display renderer that can read the SVG (which is basically just a set of drawing instructions) and executes them to produce a display/print bitmap.

For stuff like icons, SVG is overkill, so the application might keep 3 or 4 copies of a type 1 or 2 icon rendered at different resolutions, because that's all the app really needs anyway. SVG, on the other hand is good where you want to be able to smoothly stretch an image to any size.

[Piet Souris]

I replaced the png by a genuine svg file, but the code still uses ImageIO.read to read the file. I was hoping that some special routine would take care of that one. Nope. So this route is not working. Now, looking at the code of JGraphX, I think it is possible to adapt JGraphX so that is uses, in case of scaling, the most suitable reolution present, but that will be a hazardous job (or maybe previous replier has some solution for this). So, unless something else comes to mind, I stick to my advice: make a big-resolution version of  your icon, so that enlargement can be avoided most of the time.

PS: png involves a lossless compression.