Discussion :

[favdb]

Bonjour,

Dans mon appli j'ai un mode d'affichage de notes. Chaque note est affichée dans un JPanel qui a en fond une image de Post-it en noir et blanc. L'utilisateur peut choisir une couleur pour chaque Post-it. Je souhaiterait donc faire varier la couleur de l'image en fonction du choix de l'utilisateur. J'ai bien trouvé un peu partout comment transformer une image en noir et blanc, mais rien qui ne s'applique à ce que je souhaite obtenir.

Extrait de mon code:

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
 
private String postIt = "large/post-it";
private Image img;
 
public void initUi() {
     // divers éléments initialisés
     img = IconUtil.getIconImage(postIt);
     BufferedImage bimage=colorized(image, couleur);
     // le reste des intitialisations
}
 
private BufferedImage(BufferedImage src, Color c) {
     BufferedImage dest=new BufferedImage(src.getWidth(null), src.getHeight(null), BufferedImage.TYPE_INT_ARGB);
     // c'est là que ça coince
     return(dest);
}

Remarque: l'image du post-it comporte des zones de transparence qu'il ne faut pas coloriser. Voici un exemple:
Image source:

Exemple dans une couleur déterminée (251,200,200):

(transformation effectuée avec la fonction "Couleurs > Coloriser" de Gimp)

Le but de la manœuvre est de n'avoir qu'une seule image source plutôt que autant de version qu'il y a de couleur sélectionnable par l'utilisateur.

Merci d'avance pour vos suggestions/solutions.

[joel.drigo]

Salut,

Tu peux faire ça en composant l'image en AlphaComposite / SrcATOP d'une image entièrement remplie de la couleur voulue, avec une transparence (dans mon exemple, 35%).

POC pour exemple :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
public class ColorizeImage {
 
	private static BufferedImage currentImage;
	private static Color currentColor;
 
	public static void main(String[] args) {
 
 
		JPanel panel = new JPanel(new BorderLayout());
		panel.setBorder(BorderFactory.createEmptyBorder(10,10,10,10));
 
		JPanel buttonPanel = new JPanel(new GridBagLayout());
		JButton fileButton = new JButton("Choisir fichier");
		buttonPanel.add(fileButton); 
		panel.add(buttonPanel, BorderLayout.NORTH);
 
		JPanel imagePanel = new JPanel(new GridBagLayout());
		Dimension imageSize = new Dimension(300,300);
		imagePanel.setPreferredSize(imageSize);
		imagePanel.setMaximumSize(imageSize);
		imagePanel.setMinimumSize(imageSize);
		JLabel imageLabel = new JLabel();
		imagePanel.add(imageLabel);
		panel.add(imagePanel,BorderLayout.CENTER);
 
		JPanel colorPanel = new JPanel(new GridLayout(0, 1, 5, 5));
		ButtonGroup colorGroup = new ButtonGroup();
		{
			JRadioButton radio = new JRadioButton("Original");
			colorPanel.add(radio);
			colorGroup.add(radio);
			radio.addActionListener(e->setColor(imageLabel,null));
		}
		Color[] colors = { Color.RED, Color.BLUE, Color.YELLOW, Color.PINK, Color.CYAN, Color.ORANGE, Color.GREEN, Color.WHITE };
		String[] colorNames = { "Rouge", "Bleu", "Jaune", "Rose", "Ciel", "Orange", "Vert", "Blanc" };
		for(int i=0; i<colors.length; i++) {
			Color color = colors[i];
			JRadioButton radio = new JRadioButton(colorNames[i]);
			radio.setBackground(color);
			colorPanel.add(radio);
			colorGroup.add(radio);
			radio.addActionListener(e->setColor(imageLabel,setAlpha(color,.35f)));
		}
		Collections.list(colorGroup.getElements()).stream().findFirst().get().setSelected(true);
 
		fileButton.addActionListener(e->changeImage(imageLabel,colorGroup));
 
		panel.add(colorPanel, BorderLayout.EAST);
 
		JFrame frame = new JFrame("Colorize");
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
		frame.add(panel);
 
		frame.setSize(600, 600);
		frame.setLocationRelativeTo(null);
		frame.setVisible(true);
 
	}
 
	private static Color setAlpha(Color color, float f) {
		return new Color(color.getRed(), color.getGreen(), color.getBlue(), (int)(f*255));
	}
 
	private static void changeImage(JLabel imageLabel, ButtonGroup colorGroup) {
		JFileChooser chooser = new JFileChooser();
		chooser.setFileFilter(new FileFilter() {
 
			@Override
			public String getDescription() {
				return "Fichiers JPG ou PNG";
			}
 
			@Override
			public boolean accept(File f) {
				return f.getName().toLowerCase().endsWith(".png") || f.getName().toLowerCase().endsWith(".jpg");
			}
		});
		chooser.setDialogTitle("Choisir un fichier image");
		chooser.setFileSelectionMode(JFileChooser.FILES_ONLY);
		chooser.setMultiSelectionEnabled(false);
		int result = chooser.showOpenDialog(SwingUtilities.getRootPane(imageLabel)); 
		if ( result==JFileChooser.APPROVE_OPTION ) {
			try {
				BufferedImage image = ImageIO.read(chooser.getSelectedFile());
				currentImage = image;
				setImage(imageLabel, image);
				setColor(imageLabel, currentColor);
			}
			catch (Exception e) {
				e.printStackTrace();
				JOptionPane.showMessageDialog(SwingUtilities.getRootPane(imageLabel), "Erreur lors du chargement de l'image");
			}
 
		}
	}  
 
	private static void setImage(JLabel imageLabel, BufferedImage image) {
		ImageIcon icon = new ImageIcon(image);
		imageLabel.setIcon(icon);
	}
 
	private static void setColor(JLabel imageLabel, Color color) {
		currentColor=color;
		if ( currentImage!=null ) {
			if ( color==null ) {
				setImage(imageLabel, currentImage);
			}
			else {
				BufferedImage coloredImage = setColor(currentImage, color);
				setImage(imageLabel, coloredImage);
			}
		}
	}
 
	private static BufferedImage setColor(BufferedImage image, Color color) {
        int w = image.getWidth();
        int h = image.getHeight();
        BufferedImage img = new BufferedImage(w,h,BufferedImage.TYPE_INT_ARGB);
        Graphics2D g = img.createGraphics();
        g.drawImage(image, 0,0, null);
        g.setComposite(AlphaComposite.SrcAtop);
        g.setColor(color);
        g.fillRect(0,0,w,h);
        g.dispose();
        return img;
    } 
}

[favdb]

Bonjour Joel,

J'espérais secrètement que tu répondrais à mon appel à l'aide. J'ai appliqué ta proposition de passer par le AlphaComposite. Le problème c'est qu'au passage ça supprime tous les effets grisés de contour et d'ombrage. Un peu comme si l'image originale sert de masque à la couleur souhaitée. Je n'arrive pas à décoder l'anglais de la doc relative à cet AlphaComposite, mais j'ai compris qu'il existe d'autres règles de composite. Peut-être dois-je replacer le SrcAtop par quelque chose d'autre... mais quoi?

[favdb]

Stop, ne pas tenir compte de mon précédent message. Pris d'un doute j'ai compiler ta proposition pour la tester réellement... et ça marche. J'ai extrait juste la fonction "private static BufferedImage setColor(BufferedImage image, Color color)" et c'est ça qui ne marche pas. Je dois donc extraire la bonne partie, et surtout comprendre ton code.

[joel.drigo]

Cela ne fonctionne pas si la couleur n'a pas de composante alpha inférieur à 1 et supérieur à 0 (ça fait effectivement une sorte de masque). C'est ce dont je te parlais quand je parlais des "35%", valeur avec laquelle tu peux jouer pour renforcer ou pas la colorisation selon les besoins. C'est ce que fait gimp. Après on pourrait siouxer pour extraire l'ombre, l'épingle, son aiguille, etc pour coloriser certaines parties et pas d'autres (en fin de compte, normalement, si on veut un truc hyper réaliste, seulement le papier, et éventuellement la partie en plastique de la punaise, devrait être colorisés, et ça ne devrait pas être tout à fait la même luminosité pour les deux)

[favdb]

Après vérification et intégration réussie, ça fonctionne exactement comme je voulais. Merci Joel.

Pas besoin de plus de perfectionnement, en l'état c'est très bien. Puis-je t'ajouter comme contributeur au projet? (il s'agit de oStorybook)