Redimensionnement de BufferedImage : problème de qualité et de performance

**Ghorin** · 20/08/2009, 10h57

Bonjour,

J'ai un JDesktopPane dans lequel j'affiche des fenetres (extends JInternalFrame) qui ne contiennent qu'une image (BufferedImage) d'un décor (un meuble par exemple) et un menu contextuel qui permet de réduire/augmenter leur taille.
Les images sont des PNG avec de la transparence.

J'ai donc :
- Une classe Decor qui contient :
. l'image de base du décor
. l'échelle d'affichage de son image

- Une classe FenetreSceneDecor qui "extends" JInternalFrame et qui contient
. le décor à afficher
. l'image à afficher : cette image est une copie de l'image du décor après un "resize" si l'échelle demandée est différente de 1.0
. la méthode paint redéfinie qui fait un simple drawimage(image, 0, 0, null) de l'image calculée avec l'échelle
. la méthode reGenererImage qui recalcule l'image à afficher en fonction de l'échelle et qui est appelée depuis mon menu contextuel

Or j'ai 2 problèmes :
1/ Lorsque je déplace la fenêtre, c'est lent et le rafraichissement est mauvais (saccadé)
2/ Le redimensionnement de l'image amène à une dégradation de la qualité de l'image. J'ai trouvé 3 méthodes différentes mais chacune a son propre inconvénient soit sur la transparence soit sur la finesse de l'image obtenue.

Vous trouverez ci-dessous une version simplifiée du code de ma classe FenetreSceneDecor ainsi que le code des 3 méthodes de redimensionnement que j'ai trouvé et implémenté et à côté de chacune les problèmes rencontrés.
Je met également quelques copies d'écran pour illustrer le problème.
nb : l'image en exemple un fichier PNG de taille 649x663 pour 998 ko.

Code de ma classe principale :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
public class FenetreSceneDecor extends FenetreScene {
	private	BufferedImage	image;
	private	Decor                decor;
 
	public void paint(Graphics g) {
		Graphics2D g2d = (Graphics2D)g;
		g2d.drawImage(image, 0, 0, null);
	}
 
	private void reGenererImage(int largeur, int hauteur) {
		// METHODE 1
		image = 	OutilsImage.getImageRetaillée1(decor.getImage(), (int)(decor.getLargeur()*decor.getScale()), (int)(decor.getHauteur()*decor.getScale()));
 
		// METHODE 2
		//image = OutilsImage.getImageRetaillée2(decor.getImage(), decor.getScale());
 
		// METHODE 3
		//image = OutilsImage.getImageRetaillée3(decor.getImage(), (int)(decor.getLargeur()*decor.getScale()), (int)(decor.getHauteur()*decor.getScale()));
	}
}

Pièce jointe : "origine.jpg"
Cette image montre l'application avec le JDesktopPane et une instance de la classe FenetreSceneDecor qui affiche l'image (BufferedImage) d'une hutte vue de haut. L'image de la hutte a de la transparence (le marron sur les coins est la couleur de fond du JDesktopPane) et est à l'échelle 1.
=> la qualité de l'image est nickel (finesse et transparence) : ok
=> le deplacement de la fenetre est lent et saccadé : ko

Méthode 1 :
=> perte de la transparence (noir) : ko
=> finesse de l'image après redimensionnement : ok
Illustration : pièce jointe "1_diminuer.jpg"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
public static BufferedImage getImageRetaillée1(BufferedImage image, int largeur, int hauteur) {
	BufferedImage 	imageToSave		= new BufferedImage(largeur, hauteur, BufferedImage.TYPE_INT_BGR);
	Graphics2D 		g2d 			= imageToSave.createGraphics();
 
	g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
	g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BICUBIC);
	g2d.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
 
	g2d.drawImage(image, 0, 0, largeur, hauteur, null);
	g2d.dispose();
 
	return imageToSave;
}

Méthode 2 :
=> perte de la transparence (on retrouve le dessin d'origine) : ko
=> finesse de l'image après redimensionnement : ok
Illustration : pièce jointe "2_diminuer.jpg"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
public static BufferedImage getImageRetaillée2(BufferedImage image, double scale) {
	AffineTransform  tx = new AffineTransform();
	tx.scale(scale, scale);
	AffineTransformOp op = new AffineTransformOp(tx,AffineTransformOp.TYPE_BICUBIC);
	int type = image.getType() == 0? BufferedImage.TYPE_INT_BGR : image.getType();
	BufferedImage newImage = new BufferedImage((int)(image.getWidth(null)*scale), (int)(image.getHeight(null)*scale), type);
	return op.filter(image, newImage);
}

Méthode 3 :
=> transparence : ok
=> image très floue après redimensionnement : ko
Illustration : pièce jointe "3_diminuer.jpg"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
public static BufferedImage getImageRetaillée3(BufferedImage image, int width, int height) {
	image = createCompatibleImage(image);
	image = resize(image, 100, 100);
	image = blurImage(image);
	image = resize(image, width, height);
	return image;
}
private static BufferedImage createCompatibleImage(BufferedImage image) {
	GraphicsConfiguration gc = BufferedImageGraphicsConfig.getConfig(image);
	int w = image.getWidth();
	int h = image.getHeight();
	BufferedImage result = gc.createCompatibleImage(w, h, Transparency.TRANSLUCENT);
	Graphics2D g2 = result.createGraphics();
	g2.drawRenderedImage(image, null);
	g2.dispose();
	return result;
}
private static BufferedImage blurImage(BufferedImage image) {
	float ninth = 1.0f/9.0f;
	float[] blurKernel = {
			ninth, ninth, ninth,
			ninth, ninth, ninth,
			ninth, ninth, ninth
	};
 
	Map<Key, Object> map = new HashMap<Key, Object>();
 
	map.put(RenderingHints.KEY_INTERPOLATION,
			RenderingHints.VALUE_INTERPOLATION_BILINEAR);
 
	map.put(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
 
	map.put(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
 
	RenderingHints hints = new RenderingHints(map);
	BufferedImageOp op = new ConvolveOp(new Kernel(3, 3, blurKernel), ConvolveOp.EDGE_NO_OP, hints);
	return op.filter(image, null);
}
private static BufferedImage resize(BufferedImage image, int width, int height) {
	int type = image.getType() == 0? BufferedImage.TYPE_INT_ARGB : image.getType();
	BufferedImage resizedImage = new BufferedImage(width, height, type);
	Graphics2D g = resizedImage.createGraphics();
	g.setComposite(AlphaComposite.Src);
 
	g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
			RenderingHints.VALUE_INTERPOLATION_BILINEAR);
 
	g.setRenderingHint(RenderingHints.KEY_RENDERING,
			RenderingHints.VALUE_RENDER_QUALITY);
 
	g.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
			RenderingHints.VALUE_ANTIALIAS_ON);
 
	g.drawImage(image, 0, 0, width, height, null);
	g.dispose();
	return resizedImage;
}

Cela fait 2 jours que je me bagarre avec ça, je ne suis pas du tout doué dans la manipulation des images :-(
Si quelqu'un a des suggestions d'amélioration, merci d'avance :-)

<EDIT>24/08 : J'ai retiré les pièces jointes car j'ai besoin de place pour en mettre d'autres sur un autre thread</EDIT>

**dinobogan** · 20/08/2009, 11h28

Si c'est du Swing, il faut surcharger "paintComponent".
Il nous faudrait le code minimal qui compile, sans redimensionnement de l'image. Au moins pour reproduire le problème de saccade.

**Ghorin** · 20/08/2009, 13h05

Si c'est du Swing, il faut surcharger "paintComponent".

Quand je fais ça (mettre paintComponent à la place de paint), j'obtiens un joli rectangle vide sans l'image.

Il nous faudrait le code minimal qui compile, sans redimensionnement de l'image. Au moins pour reproduire le problème de saccade.

J'ai construit un mini-projet qui contient 3 classes regroupantles fonctions qui concernent ce problème. C'est en pièce jointe. Je met également dans le zip l'image qui me sert de cas de test, il faut la mettre à la racine du class path de l'appli ou modifier le chemin dans la fonction initialiserDecor() de la classe test_1.

merci encore pour ton aide

**Ghorin** · 20/08/2009, 13h35

Je viens de faire quelques tests pour le problème de performance lors du déplacement de ma fenetre FenetreSceneDecor et en fait c'est très lié à la taille de l'image apparemment puisque si je la réduis (998ko => 250ko) alors c'est beaucoup plus fluide.
Alors soit c'est mon code qui n'est pas du tout optimisé ou adapté au besoin (c'est très possible vu mon inexpérience dans ce domaine de l'image), soit c'est normal et alors je suis très surpris qu'une appli java/swing sur nos PCs d'aujourd'hui (je teste sur un dual-core à 1,6 GHZ + 3GO mémoire) ne puisse pas faire ce genre de boulot sans "ramer".

**Ghorin** · 20/08/2009, 13h48

Si c'est du Swing, il faut surcharger "paintComponent".

Je viens de modifier mon code pour utiliser paintComponent à la place de paint. Mais cela ne change rien à part que la transparence est ko même lors du chargement de l'image sans retaillage.
Mes modifs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
public class JFenetreSceneDecor extends JInternalFrame {
	...
	private JLabel			lbDecor;
 
	public JFenetreSceneDecor(String title, Decor decor) {
		 ...
		this.lbDecor	 = new JLabel();
		this.add(lbDecor);
	}
	public void paintComponent(Graphics g) {
		lbDecor.paint(g);
	}
	private void genereImage() {
		...
		lbDecor.setIcon(new ImageIcon(image));
	}

**dinobogan** · 20/08/2009, 14h02

Envoyé par Ghorin

C'est en pièce jointe.

Il n'y a pas de pièce jointe

**Ghorin** · 20/08/2009, 14h16

Arrrrggh ! je n'avais pas vu que j'avais dépassé la limite de taille de mes pièces jointes.
Bon j'ai remis le code source.
J'ai mis aussi mon image png (avec transparence) mais il faudrait l'agrandir (700x700 par exemple) pour voir apparaitre le pb de perfs.

Précision pour compiler le code (avec eclipse) : il faut modifier un paramètre du projet pour qu'il puisse compiler car le code utilise une api vieillotte :
Properties du projet / Java compiler / Errors/Warnings / Deprecated and restricted API :
Forbidden reference (access rules) : Warning (à la place de Error)

**slim_java** · 20/08/2009, 14h50

c'est car tu fait autan de redimensionnement de ton image .

**Ghorin** · 20/08/2009, 15h01

c'est car tu fait autan de redimensionnement de ton image

Non, je ne fait qu'un seul redimensionnement : lorsque l'utilisateur choisit "augmenter" ou "diminuer" dans le menu popup. L'image redimensionnée est alors stockée et c'est cette image qui est affichée par le paint.

**slim_java** · 20/08/2009, 15h18

Envoyé par Ghorin

Non, je ne fait qu'un seul redimensionnement : lorsque l'utilisateur choisit "augmenter" ou "diminuer" dans le menu popup. L'image redimensionnée est alors stockée et c'est cette image qui est affichée par le paint.

j'ai pas bien regardé ton code ,mais je veut savoir comment se fait le redimensionnement : est ce que l'utilisateur donne les nouveaux valeurs A,B et en voit limage prend les nouveaux dimensions directement
ou bien en voit comment l'image passe de ce taille actuelles vers la nouvelle taille .
c'est a dire en voit l'image qui se grandi peut a peut jusqu'au atteindre sa nouvelle taille ,ou bien ,elle prend directement les nouvelle dimension

**Ghorin** · 20/08/2009, 15h33

L'utilisateur indique, via un menu popup, si il veut augmenter ou diminuer l'image. Cela lance ensuite une fonction qui génère une nouvelle image et la stocke. Elle est ensuite affichée par la paint(...).
Sinon on ne voit pas l'agrandissement se faire, on passe directement de la taille précédente à la nouvelle taille.

**slim_java** · 20/08/2009, 15h44

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
int type = image.getType() == 0? BufferedImage.TYPE_INT_BGR : image.getType();

essayer de travaille avec le type de 'limage

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 image.getType()

sans le modifier dans

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
public static BufferedImage getImageRetaillée2(BufferedImage image, double scale) {
	AffineTransform  tx = new AffineTransform();
	tx.scale(scale, scale);
	AffineTransformOp op = new AffineTransformOp(tx,AffineTransformOp.TYPE_BICUBIC);
	int type = image.getType() == 0? BufferedImage.TYPE_INT_BGR : image.getType();
	BufferedImage newImage = new BufferedImage((int)(image.getWidth(null)*scale), (int)(image.getHeight(null)*scale), type);
	return op.filter(image, newImage);
}

**Ghorin** · 20/08/2009, 16h08

C'est ce que j'avais à l'origine mais ça plantait au niveau de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
BufferedImage newImage = new BufferedImage((int)(image.getWidth(null)*scale), (int)(image.getHeight(null)*scale), image.getType());

avec l'erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
Exception in thread "AWT-EventQueue-0" java.lang.IllegalArgumentException: Unknown image type 0

et j'avais donc rajouté la ligne précédente qui permettait de mettre une valeur par défaut si le type d'image n'était pas trouvé.
Par contre je me demande bien pourquoi il ne reconnait pas l'image, png n'est pourtant pas un format méconnu, ou y a t-il une particularité dans mon image (transparence, ... ?)

**slim_java** · 20/08/2009, 16h19

Envoyé par Ghorin

Par contre je me demande bien pourquoi il ne reconnait pas l'image, png n'est pourtant pas un format méconnu, ou y a t-il une particularité dans mon image (transparence, ... ?)

ça dépend de comment ta fait ta associer un BufferedImage a ton fichier PNG

et dans ton cas je vois un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
new BufferedImage(largeur, hauteur, BufferedImage.TYPE_INT_BGR);

et je me demande pourqoi un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 TYPE_INT_BGR

et non pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 BufferedImage.TYPE_INT_RGB

Envoyé par Ghorin

ou y a t-il une particularité dans mon image (transparence, ... ?)

c'est un autre problème

**Ghorin** · 20/08/2009, 16h56

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

BufferedImage.TYPE_INT_RGB

ça ne change rien

**slim_java** · 20/08/2009, 17h01

attend ,essaye d'enlever c'est lignes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
Graphics2D 		g2d 			= imageToSave.createGraphics();
 
	g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
	g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BICUBIC);
	g2d.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);

a chaque cou d'oeil sur ton code ,je vois quelque chose

**Ghorin** · 20/08/2009, 17h48

Graphics2D g2d = imageToSave.createGraphics();

il n'est possible d'enlever cette ligne car g2d est utilisé pour créer la nouvelle image (g2d.drawImage() & g2d.dispose() )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BICUBIC);
g2d.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);

Je les ai enlevé mais ça ne change rien.

a chaque cou d'oeil sur ton code ,je vois quelque chose

Tout le code de manipulation d'images a été trouvé sur différents sites (forums ...), j'apprends au fur et à mesure que je les utilise et que j'ai des remarques/suggestions sur ce forum :-)

**slim_java** · 20/08/2009, 17h57

Envoyé par Ghorin

il n'est possible d'enlever cette ligne car g2d est utilisé pour créer la nouvelle image (g2d.drawImage() & g2d.dispose() )

je suis d'accord mais c'était une faute d'édition

essaye avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
 
BufferedImage imageInit = ImageIO.read(new File(...path...);																								
BufferedImage image = new BufferedImage(imageInit.getWidth(),imageInit.getHeight(),BufferedImage.TYPE_INT_RGB); 
				Graphics2D g  = image.createGraphics();	
				g.drawImage(imageInit, null, null);
				g .dispose();

Envoyé par Ghorin

Tout le code de manipulation d'images a été trouvé sur différents sites (forums ...), j'apprends au fur et à mesure que je les utilise et que j'ai des remarques/suggestions sur ce forum :-)

il faut éviter au maximum le copier/coller

**Ghorin** · 20/08/2009, 19h16

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
BufferedImage imageInit = ImageIO.read(new File(...path...);																								
BufferedImage image = new BufferedImage(imageInit.getWidth(),imageInit.getHeight(),BufferedImage.TYPE_INT_RGB); 
Graphics2D g  = image.createGraphics();	
g.drawImage(imageInit, null, null);
g .dispose();

J'ai mis ce bout de code et si j'ai bien compris il créé une nouvelle image à partir de l'ancienne sans faire de transformation (pas de redimensionnement par exemple). Et bien le résultat est : perte de la transparence toujours présente. Est-ce qu'il n'y aurait pas un paramètre de Graphics2D a positionner pour qu'il sache gérer la transparence ?

**slim_java** · 20/08/2009, 19h24

Envoyé par Ghorin

J'ai mis ce bout de code et si j'ai bien compris il créé une nouvelle image à partir de l'ancienne sans faire de transformation (pas de redimensionnement par exemple). Et bien le résultat est : perte de la transparence toujours présente. Est-ce qu'il n'y aurait pas un paramètre de Graphics2D a positionner pour qu'il sache gérer la transparence ?

alors au moin on a arrivé a quelque chose ,maintenant pour la transparence ,je suis pas sur que ca résoudle probléme mais tu doit métre pour le type dans le code que je t'es donnée

Code :

Sélectionner tout - Visualiser dans une fenêtre à part