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

Version imprimable

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:

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:

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:

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:

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>

20/08/2009, 11h28
dinobogan

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.
20/08/2009, 13h05
Ghorin

Citation:

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.

Citation:

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
20/08/2009, 13h35
Ghorin

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".

Citation:

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:

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)); }

20/08/2009, 14h02
dinobogan

Citation:

Envoyé par Ghorin

C'est en pièce jointe.

Il n'y a pas de pièce jointe :roll:
20/08/2009, 14h16
Ghorin

2 pièce(s) jointe(s)

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)
20/08/2009, 14h50
slim_java

c'est car tu fait autan de redimensionnement de ton image .
20/08/2009, 15h01
Ghorin

Citation:

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.
20/08/2009, 15h18
slim_java

Citation:

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
20/08/2009, 15h33
Ghorin

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.

Code:

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

essayer de travaille avec le type de 'limage

Code:

image.getType()

sans le modifier dans

Code:

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);
}

20/08/2009, 16h08
Ghorin
C'est ce que j'avais à l'origine mais ça plantait au niveau de
Code:

1 2 BufferedImage newImage = new BufferedImage((int)(image.getWidth(null)*scale), (int)(image.getHeight(null)*scale), image.getType());
avec l'erreur :
Code:

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, ... ?)
20/08/2009, 16h19
slim_java
Citation:

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:

1 2 new BufferedImage(largeur, hauteur, BufferedImage.TYPE_INT_BGR);
et je me demande pourqoi un

Code:

TYPE_INT_BGR

et non pas

Code:

BufferedImage.TYPE_INT_RGB

Citation:

Envoyé par Ghorin

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

c'est un autre problème
20/08/2009, 16h56
Ghorin

Code:

BufferedImage.TYPE_INT_RGB

ça ne change rien

attend ,essaye d'enlever c'est lignes

Code:

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 :)

Citation:

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:

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.

Citation:

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 :-)

Citation:

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:

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();
Citation:

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

Code:

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 ?

20/08/2009, 19h24
slim_java

Citation:

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:

BufferedImage.TYPE_INT_ARGB
20/08/2009, 19h29
Ghorin

Ouaouh ! Ca marche : la transparence est gardée dans la nouvelle image. Et j'ai appliqué ta modif dans mon projet qui fait le redimensionnement et c'est ok aussi.
=> l'image est redimensionnée avec une bonne qualité et en gardant la transparence :ccool:

Reste plus qu'à trouver comment améliorer les performances (ça rame avec une pauvre image de 1 mo quand je déplace ma fenetre).

Un grand merci à toi :D
20/08/2009, 22h33
slim_java

Citation:

Envoyé par Ghorin

Ouaouh ! Ca marche : la transparence est gardée dans la nouvelle image. Et j'ai appliqué ta modif dans mon projet qui fait le redimensionnement et c'est ok aussi.
=> l'image est redimensionnée avec une bonne qualité et en gardant la transparence :ccool:

Reste plus qu'à trouver comment améliorer les performances (ça rame avec une pauvre image de 1 mo quand je déplace ma fenetre).

Un grand merci à toi :D

avec plaisir
21/08/2009, 01h13
bouye

Ben la faut la transformer en une image compatible avant de l'afficher (tu as deja la fonction qu'il faut dans le code de la methode 3 dans ton premier post*).

*A ce propos tu disais que l'image etait floue en methode 3 mais sans lire en entier il y a une methode justement pour appliquer un kernel destiner a rendre l'image floue... ca ne serait pas plutot un kernel de type sharpen qu'il faudrait utiliser a la place ?

Note un type == 0, c'est BufferedImage.TYPE_CUSTOM, c'est normal qu'il ne puisse pas creer une nouvelle image avec.