29
novembre
2012

Chargement dynamique d’images et autre fichiers avec JEE

Un article de karbos Comments

Commentaires fermés

Charger une image depuis une base de données, modifier un fichier avant de le rendre disponible , vérifier des règles de sécurité non standard avant de fournir une ressource… autant de raison de rendre le chargement de fichiers dynamique. C’est la raison d’être des serveur HTTP, allez-vous me dire ! Vous avez raison. Mais quand on a le nez dans la POO tous les jours, comme moi, on en oublie les mécanismes de base.

Dans ce billet, je vais donc vous montrer un truc tout simple : charger une image depuis un emplacement protégé du serveur. Mais la manière dont je vous propose de le faire va, je l’espère, nourrir votre imagination pour trouver d’autres usages à cette technique élémentaire.

Un peu de HTML

Observons le code HTML suivant :

1	<img src="images/Nature.jpg"/>

Mon client va télécharger une ressource (Nature.jpg). Pour cela il va donc, après avoir chargé la page qui contient cette balise, envoyer une requête pour obtenir la ressource qui lui manque afin de la placer au bon endroit.
Cette requête va ressembler à :

GET /[adresse du site]/images/Nature.jpg HTTP/1.1
Host: [adresse du site]
User-Agent: [signature du navigateur]
Accept: image/jpg
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
etc.

Je ne vais pas faire un cours sur le protocole HTTP ici, ce qui nous intéresse, c’est la requête :

GET /[adresse du site]/images/Nature.jpg

et le type mime accepté :

Accept: image/jpg

Cette dernière ligne va changer en fonction des navigateurs et des versions…
Bref, ce que le navigateur attend en retour de sa requête, c’est une image au format jpg. Et bien nous allons lui fournir cette image… via une servlet.

Servlet-mapping

Construisons un petit projet Web avec cette structure :

Contenu du fichier index.html :

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Chargement dynamique d'image</title>
</head>
<body>
<img src="images/Nature.jpg"/>
</body>
</html>

C’est très simple. Voici un exemple de rendu :

Maintenant nous allons ajouter une servlet. Pour cela, nous allons créer la classe qui étend HttpServlet, dans un premier temps, puis nous modifierons le fichier web.xml.
La servlet ressemblerait à ça :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

public class ImageServlet extends HttpServlet {
/** Méthode exécutée lors d'une requête e type GET */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//Chargement d'une image depuis un emplacement sécurisé du serveur
BufferedImage image = getImage(request.getRequestURI());
//Définition de l'en-tête de la réponse
response.setContentType("image/jpeg");
//Sérialisation de l'image dans la réponse
OutputStream out = response.getOutputStream();
ImageIO.write(image, "JPEG", out);
out.close();
}
/** Méthode qui fournit une image */
private BufferedImage getImage(String uri) throws IOException {
return ImageIO.read(new File(getServletContext().getRealPath("/WEB-INF/images/Nature-2.jpg")));
}
}

Et dans le fichier web.xml, voici comment on configure la servlet :

1
2
3
4
5
6
7
8
9
10

<servlet>
<description>Servlet fournissant les images</description>
<display-name>ImageServlet</display-name>
<servlet-name>ImageServlet</servlet-name>
<servlet-class>com.monsite.servlets.ImageServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ImageServlet</servlet-name>
<url-pattern>/images/*</url-pattern>
</servlet-mapping>

On relance le serveur, on rafraîchit la page dans le navigateur, et voilà !

Conclusion

Dans cet exemple, la méthode getImage se contente de fournir un fichier provenant d’un emplacement protégé du serveur. L’image /images/Nature.jpg existe toujours, mais elle est masquée par la servlet qui fournit une ressource de substitution. Cela peut s’avérer pratique, notamment lorsqu’on utilise des Framework qui génèrent du code HTML, lorsque l’on souhaite effectuer une opération sur une image avant de la sérialiser (définir sa taille en fonction des paramètres et de la requête, par exemple avec des paramètres du type « ?w=800&h=600″), ou tout simplement pour charger une image dynamiquement (depuis une base de données ou un serveur tiers).

Mots-clefs :balise image, GET, HTTP, image, java, requete, Servlet

Les commentaires sont fermés.

Connexion

Le blog de Karbos

Un peu de HTML

Servlet-mapping

Conclusion

Articles récents

Mots-clefs

Archives

Catégories

Commentaires récents

Méta