Vous devez être membre et vous identifier pour publier un article.
Les visiteurs peuvent toutefois commenter chaque article par une réponse.
JAVA - Générer dynamiquement des images
Article publié le 29/01/2007 12:34:19Beaucoup d'entre vous se sont déjà sûrement posés la question de savoir s'il est possible de générer dynamiquement une image côté serveur et de la référencer directement dans une page HTML.
La réponse est oui!
Mieux que ça: vous pouvez générer une image côté serveur et l'envoyer vers le client sans devoir la stocker physiqument sur le serveur! Trop fort, non?
Assez discuté, passons à la pratique...
Nous allons créer une servlet qui va générer une image représentant un arc fermé sur base des paramètres passés à la requête. Ce paramètres, à titre d'info, sont la taille de l'image à générer (largeur et hauteur) ainsi que l'angle de début et l'angle de fin de l'arc à générer.
Commencez par créer la classe suivante qui étend HTTPServlet (attention à modifier le nom du package pour qu'il corresponde avec votre package !)
Code Java (115 lignes)
/* * Created on Jan 26, 2007 * */ package be.fery.dynamicImage.control; import java.awt.Color; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Shape; import java.awt.geom.Arc2D; import java.awt.geom.Rectangle2D; import java.awt.image.BufferedImage; import java.io.IOException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JPEGImageEncoder; public class BasicImageGeneratorServlet extends HttpServlet { private int beginAngle = 0; private int endAngle = 180; private int imageWidth = 320; private int imageHeight = 200; public BasicImageGeneratorServlet() { super(); } public void doGet(HttpServletRequest request, HttpServletResponse response) { doHandle(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) { doHandle(request, response); } public void doHandle(HttpServletRequest request, HttpServletResponse response) { try { getParameters(request); gr.fillRect(0, 0, imageWidth, imageHeight); gr.drawArc(0, 0, imageWidth, imageHeight, beginAngle, endAngle - beginAngle); int x1 = (int) (imageWidth / 2); int y1 = (int) (imageHeight / 2); gr.drawLine(x1, y1, x2, y2); gr.drawLine(x1, y1, x2, y2); response.setContentType("image/jpg"); response.setHeader("Content-disposition", "inline; filename=test.jpg"); JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(response.getOutputStream()); encoder.encode(image); e.printStackTrace(); } } private void getParameters(HttpServletRequest request) { imageWidth = 320; try { if ((param = request.getParameter(REQ_PARAM_BEGIN_ANGLE)) != null) beginAngle = 0; } try { if ((param = request.getParameter(REQ_PARAM_END_ANGLE)) != null) endAngle = 180; } try { if ((param = request.getParameter(REQ_PARAM_IMG_WIDTH)) != null) imageWidth = 320; } try { if ((param = request.getParameter(REQ_PARAM_IMG_HEIGHT)) != null) imageHeight = 200; } } }
Créez ensuite le fichier web.xml suivant dans le répertoire WEB-INF de votre appliction:
Code XML (17 lignes)
‹?xml version="1.0" encoding="UTF-8"?› ‹web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4"› ‹servlet› ‹servlet-name›BasicGenerator‹/servlet-name› ‹servlet-class›be.fery.dynamicImage.control.BasicImageGeneratorServlet‹/servlet-class› ‹/servlet› ‹servlet-mapping› ‹servlet-name›BasicGenerator‹/servlet-name› ‹url-pattern›/BasicGenerator‹/url-pattern› ‹/servlet-mapping› ‹/web-app›
Créer un fichier WAR qui contient ces deux fichiers et déployer le sous Tomcat par exemple.
Créez enfin un fichier HTML dans lequel vous copier le code suivant:
Code html4strict (65 lignes)
‹html› ‹head› ‹script type="text/javascript" language="javascript"› var tOut = 2000; var tId = null; function updateGraphics(){ document.getElementsByName('endAngle')[0].value=parseInt(document.getElementsByName('endAngle')[0].value)+10; getImage(); tId = setTimeout("updateGraphics()",tOut); } function startUpdate(){ document.getElementsByName('image')[0].style.display="block"; document.getElementsByName('stopButton')[0].disabled=false; document.getElementsByName('startButton')[0].disabled=true; updateGraphics(); } function stopUpdate(){ clearTimeout(tId); document.getElementsByName('startButton')[0].disabled=false; document.getElementsByName('stopButton')[0].disabled=true; } function getImage(){ var url = "http://‹votre_serveur›:‹votre_port›/imageGenerator/BasicGenerator"; url += "?imageWidth="+getFieldValue('imageWidth'); url += "&imageHeight="+getFieldValue('imageHeight'); url += "&beginAngle="+getFieldValue('beginAngle'); url += "&endAngle="+getFieldValue('endAngle'); document.getElementsByName('image')[0].src=url; } function getFieldValue(fieldName){ document.getElementsByName('image')[0].style.display="block"; return document.getElementsByName(fieldName)[0].value; } ‹/script› ‹/head› ‹body› ‹table› ‹tr› ‹td›‹button id="startButton" name="startButton" type="button" onclick="javascript:startUpdate();"›Start‹/button›‹/td› ‹td›‹button id="stopButton" name="stopButton" type="button" onclick="javascript:stopUpdate();" disabled›Stop‹/button›‹/td› ‹/tr› ‹tr› ‹td›Largeur de l'image:‹/td›‹td›‹input type="text" name="imageWidth" value="480"/›‹/td› ‹td›Hauteur de l'image:‹/td›‹td›‹input type="text" name="imageHeight" value="200"/›‹/td› ‹/tr› ‹tr› ‹td›Angle de départ:‹/td›‹td›‹input type="text" name="beginAngle" value="0"/›‹/td› ‹td›Angle de fin:‹/td›‹td›‹input type="text" name="endAngle" value="360"/›‹/td› ‹/tr› ‹tr› ‹td colspan="2"›‹button type="button" onclick="javascript:getImage();"/›Voir l'image‹/button›‹/td› ‹/tr› ‹tr› ‹td colspan="2"› ‹img id="image" name="image" style="display: none;"/› ‹/td› ‹/tr› ‹/table› ‹/body› ‹/html›
Démarrer votre page HTML dans un navigateur.
Modifier la valeur de un ou plusieurs champs et cliquez sur le bouton "Voir l'image". L'image est générée dynamiquement côté serveur en fonction des valeurs fournies et est mise à jour dans votre page HTML.
Cliquez ensuite sur le bouton "Start". La valeur de l'angle de fin sera incrémentée de 10 toutes les 2 secondes et l'image sera regénérée (utilisation de setTimeout(...) en Javascript.
Le code qui permet de générer l'image et de l'envoyer sur le flux sans la stocker côté serveur se trouve dans la servlet:
Code Java (28 lignes)
//Création d'un image //Récupération de l'objet Graphics de cette image que l'on caste en Graphics2D //On dessine sur l'objet Graphics2D gr.fillRect(0, 0, imageWidth, imageHeight); gr.drawArc(0, 0, imageWidth, imageHeight, beginAngle, endAngle - beginAngle); int x1 = (int) (imageWidth / 2); int y1 = (int) (imageHeight / 2); gr.drawLine(x1, y1, x2, y2); gr.drawLine(x1, y1, x2, y2); //IMPORTANT: définir le type de contenu de la réponse response.setContentType("image/jpg"); //Définir le contenu comme étant "inline" et, éventuellement, spécifier un nom pour l'image générée response.setHeader("Content-disposition", "inline; filename=test.jpg"); //Instancier un JPEGImageEncoder en lui passant le flux sur lequel il devra envoyer l'image JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder (response.getOutputStream()); //Appeler la méthode encode() de l'encoder: la magie est ici (ici devrait apparaître un smiley qui vous fait un petit clin d'oeil mais, nom di dju Steph!, arrête de parser tout le code publié et de supprimer mes petites smileys!). En effet, l'encoder va générer l'image JPEG et l'envoyer directement sur le flux de sortie de la servlet encoder.encode(image);
Zé voilou!
Exercice intéressant: essayer d'adapter le code pour créer un chronomètre ou, mieux, une petite horloge...
HackTrack
Un article de HackTrackModifié 1 fois. (dernière modification le 29/01/2007 12:37:57 par HackTrack)
Source : indéterminée
Deutsche Übersetzung
Sie haben gebeten, diese Seite auf Deutsch zu besuchen. Momentan ist nur die Oberfläche übersetzt, aber noch nicht der gesamte Inhalt.Wenn Sie mir bei Übersetzungen helfen wollen, ist Ihr Beitrag willkommen. Alles, was Sie tun müssen, ist, sich auf der Website zu registrieren und mir eine Nachricht zu schicken, in der Sie gebeten werden, Sie der Gruppe der Übersetzer hinzuzufügen, die Ihnen die Möglichkeit gibt, die gewünschten Seiten zu übersetzen. Ein Link am Ende jeder übersetzten Seite zeigt an, dass Sie der Übersetzer sind und einen Link zu Ihrem Profil haben.
Vielen Dank im Voraus.
Dokument erstellt 13/09/2004, zuletzt geändert 26/10/2018
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/ast-rf-379.html
Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.