[web]Modification d'image en ligne.

Version imprimable

31/10/2008, 12h00
tydjet

[web]Modification d'image en ligne.

Bonjour

Je souhaite pouvoir intégrer sur un site web une fonctionnalité de modification d'image. La couleur principalement.
J'avais envisagé au départ de faire une base de donnée contenant la même image sous différent coloris et de charger a l'écran la bonne image en fonction de l'appel.
Mais cela va représenter un travail de collecte énorme.

Donc je me demande si il existe des script de saturation/contraste/teinte a appliquer sur l'image directement dans le navigateur.

Et si cela est possible techniquement, vers quel langage me diriger? flash? javascript?

Pourriez vous orientez mon choix.

cordialement
31/10/2008, 12h22
millie

Citation:

Envoyé par tydjet

Donc je me demande si il existe des script de saturation/contraste/teinte a appliquer sur l'image directement dans le navigateur.

Non pas vraiment.

Ce qui est conseillé, c'est d'avoir une image de référence (dans une base de donnée, un fichier ou autres) et de faire le calcul en cours de route côté serveur (quand l'image est demandée) (on peut également imaginer un système de cache)
31/10/2008, 14h50
tydjet

Citation:

Envoyé par millie

Non pas vraiment.

Ce qui est conseillé, c'est d'avoir une image de référence (dans une base de donnée, un fichier ou autres) et de faire le calcul en cours de route côté serveur (quand l'image est demandée) (on peut également imaginer un système de cache)

Je ne comprend pas bien ta solution.

En fait, je souhaite développer une solution de personnalisation d'image. Une image est découpée en plusieurs parties. L'utilisateur sélectionne la partie qu'il souhaite modifier et séléctionne la couleur a appliquer parmis le panel proposé.

L'image (la photo) est stockée dans une base donnée. l'utilisateur demande cette photo dans une autre couleur. Peut on appliquer un filtre sur la photo? ou bien je dois recharger une autre photo?

de quel calcul parles tu?
31/10/2008, 15h03
millie

Citation:

Envoyé par tydjet

Je ne comprend pas bien ta solution.

En fait, je souhaite développer une solution de personnalisation d'image. Une image est découpée en plusieurs parties. L'utilisateur sélectionne la partie qu'il souhaite modifier et séléctionne la couleur a appliquer parmis le panel proposé.

L'image (la photo) est stockée dans une base donnée. l'utilisateur demande cette photo dans une autre couleur. Peut on appliquer un filtre sur la photo? ou bien je dois recharger une autre photo?

de quel calcul parles tu?

Bah, une image est affichée par le navigateur via un lien du type :
<img src="serveur/traitement"/>

Le navigateur envoie une requête au serveur pour récuperer l'image (via une requête de type GET suivant le protocole http)

Il suffit d'effectuer un traitement particulier et de retourner au client un fichier image que tu auras modifié en cours de route.

Par exemple en Java EE, il suffit de faire une servlet qui retourne un fichier provenant d'un BufferedImage (sauvegardé au format png par exemple) (il faut bien mettre l'header et le content type de la réponse du serveur : http://java.developpez.com/faq/javae...GEMENT_FICHIER )
31/10/2008, 15h18
millie

En fait, je recapitule, mais il te faudra probablement des connaissances supplémentaires dans le langage que tu veux (php, java etc.) pour faire ça :

Le client demande l'image se trouvant à l'adresse "a".
Le serveur recoit la demande. A partir de l'adresse "a", exécute un code métier particulier qui récupère l'image de la base de donnée, la convertit dans un format lisible par le client (png, jpg) et le retourne au client vers une réponse HTTP (en pensant à modifier l'entête et le type de contenu).

Le client demande via un champs ou autre de changer par exemple la luminosité sur l'image en cours, il appuie sur un bouton appliquer
Le serveur recoit les changements demandé, charge les paramètres et charge l'image du client. Il modifie l'image suivant les paramètres recus (genre luminosité), il génère une image dans un format lisible par le client (exemple : png etc.) et le retourne au client.

Ce qui est souvent fait, ce qu'il y a un traitement particulier qui est ajouté au serveur, par exemple l'appel à : http://serveur/recupererImage?id=uneid permettra de transférer une image au client via un "id" particulier qui aura été généré pendant la modification.

Voici un exemple en Java EE d'une application Web qui permet de générer des images de graphe dynamiquement.

Le principe de génération/récuperation d'image étant le même.

La classe servlet générant l'image à partir d'une spécification de graphe en utilisant Dot :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
package filiation;
 
import java.io.BufferedWriter;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.io.Writer;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
 
import dot.DotCaller;
 
/**
 * Servlet implementation class for Servlet: GraphViewer
 *
 */
 public class GraphViewer extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
    /* (non-Java-doc)
	 * @see javax.servlet.http.HttpServlet#HttpServlet()
	 */
	public GraphViewer() {
		super();
	}   	 	
 
	/* (non-Java-doc)
	 * @see javax.servlet.http.HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String graph = (String) request.getParameter("graph");
		String error = null;
 
		if(graph!=null) {
			File temp = null;
			try {
				temp = File.createTempFile("zzz", ".tmp");
				File image = File.createTempFile("zzz", ".gif");
 
				BufferedWriter writer = new BufferedWriter(new PrintWriter(new FileOutputStream(temp)));
				writer.write(graph);
				writer.flush();
 
				if(DotCaller.callDot(temp.getAbsolutePath(), image.getAbsolutePath(), DotCaller.IMAGE_GIF)==1)
					throw new Exception("Error calling Dot");
 
				ImageLocation.addLocation(image.getName(), image.getAbsolutePath());
 
				request.getSession().setAttribute("url", image.getName());
 
				writer.close();
 
			}
			catch(Exception e) {
				e.printStackTrace();
				error = e.getMessage();
			}finally {
				if(temp!=null)
					temp.delete();
			}
		}
		else
			error = "No grah";
 
		if(error!=null) {
			request.getSession().setAttribute("error", error);
			response.sendRedirect("./errorPage.jsp");
		}
		else {
			response.sendRedirect("./graphViewer.jsp");
		}
	}   	  	    
}

La servlet met dans un cache le fichier image généré.

La servlet qui permet de récuperer dynamiquement l'image en utilisant un id (qui aura été généré pendant la création de l'image dans la servlet précédente)

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
59
60
package filiation;
 
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import sun.security.action.GetPropertyAction;
 
/**
 * Servlet implementation class for Servlet: ImageReader
 *
 */
 public class ImageReader extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
    /* (non-Java-doc)
	 * @see javax.servlet.http.HttpServlet#HttpServlet()
	 */
	public ImageReader() {
		super();
	}   	
 
	/* (non-Java-doc)
	 * @see javax.servlet.http.HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String url = request.getParameter("image");
 
		if(url!=null) {
			String location = ImageLocation.getLocation(url);
			if(location!=null) {
				byte[] field = new byte[5000];
 
				response.setContentType("image/GIF");
				OutputStream oStream = response.getOutputStream();
				BufferedOutputStream bOStream = new BufferedOutputStream(oStream);
 
				InputStream iStream = new FileInputStream(location);
				BufferedInputStream bIStream = new BufferedInputStream(iStream);
 
				while((bIStream.read(field)) >=0) {
					bOStream.write(field);
				}
				bOStream.flush();
 
				bOStream.close();
				bIStream.close();
 
				//File fileImage = new File(location);
				//fileImage.delete();
			}
		}
	}  	  	  	    
}

La page jsp où l'on rentre le graphe à afficher au format dot :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<html>
<head>
<title>graphParam</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="Rational Application Developer">
</head>
<body>
 
 
<form method="post" action="GraphViewer">
<textarea name="graph" id="graph" rows="30" cols="100"></textarea>
<br />
<input type="submit"/>
</form>
</body>
</html>

La page jsp qui affiche le graphe généré en utilisant la deuxième servlet :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<html>
<head>
<title>graphViewer</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="Rational Application Developer">
</head>
<body>
 
<jsp:useBean id="url" scope="session" class="java.lang.String"/>
 
 
 
<img src="ImageReader?image=<%= url %>"/>
</body>
</html>

Je suis désolé, il n'y a pas vraiment de commentaire, c'était un truc perso fait à la va vite pour générer dynamiquement des graphes de dépendances de projet à partir de leur svn/cvs.

Ce qui donne visuellement :
http://humbert-florent.developpez.co...ationparam.jpg
http://humbert-florent.developpez.co...tionresult.jpg

03/11/2008, 08h52
tydjet

Merci bien pour ces précisions.

J'ai aussi trouvé de mon coté des fonctions php avec la librairie GD qui sont capable de modifier les images.

http://mtodorovic.developpez.com/php/gd/

Je connais beaucoup mieux php que java a vrai dire. Je vais regarder ce qui est le plus simple de mise en oeuvre et le moins lourd coté client comme coté serveur.