Chargement dynamique d’images et autre fichiers avec JEE

Charger une image depuis une base de données, modifier l’image côté serveur, appliquer un traitement, bref: voici un pattern pour le chargement dynamique d’image à partir d’une servlet.

Pour l’exemple, on va charger une image publique, dans un premier temps, puis la servlet va remplacer cette image par une image chargée dans un emplacement protégé : /WEB-INF.

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

Côté HTML

Le client browser va demander la ressource « image/Nature.jpg ».
Cette requête va ressembler à :

GET /[adresse du site]/images/Nature.jpg HTTP/1.1
Accept: image/jpg
etc.

Côté Serveur

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>

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. En pratique, on utilisera la puissance de Java pour générer ou transformer cette image.