<- Les niouzes   Portail NewsBrol ->

Vous devez être membre et vous identifier pour publier un article.
Les visiteurs peuvent toutefois commenter chaque article par une réponse.

Créer un web service avec visual studioAlterner la couleur des lignes dans une JTable

JAVA - Générer dynamiquement des images

Sommaire du document

Astuces de l’Infobrol (Java)Article publié le Lundi 29 Janvier 2007, 13:34


Beaucoup 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 !) 


  1. /*
  2.  * Created on Jan 26, 2007
  3.  *
  4.  */
  5. package be.fery.dynamicImage.control;
  6.  
  7. import java.awt.Color;
  8. import java.awt.Graphics;
  9. import java.awt.Graphics2D;
  10. import java.awt.Shape;
  11. import java.awt.geom.Arc2D;
  12. import java.awt.geom.Rectangle2D;
  13. import java.awt.image.BufferedImage;
  14. import java.io.IOException;
  15.  
  16. import javax.servlet.http.HttpServlet;
  17. import javax.servlet.http.HttpServletRequest;
  18. import javax.servlet.http.HttpServletResponse;
  19.  
  20. import com.sun.image.codec.jpeg.JPEGCodec;
  21. import com.sun.image.codec.jpeg.JPEGImageEncoder;
  22.  
  23. public class BasicImageGeneratorServlet extends HttpServlet {
  24. 	public static final String REQ_PARAM_BEGIN_ANGLE = "beginAngle";
  25.  
  26. 	public static final String REQ_PARAM_END_ANGLE = "endAngle";
  27.  
  28. 	public static final String REQ_PARAM_IMG_WIDTH = "imageWidth";
  29.  
  30. 	public static final String REQ_PARAM_IMG_HEIGHT = "imageHeight";
  31.  
  32. 	private int beginAngle = 0;
  33.  
  34. 	private int endAngle = 180;
  35.  
  36. 	private int imageWidth = 320;
  37.  
  38. 	private int imageHeight = 200;
  39.  
  40. 	public BasicImageGeneratorServlet() {
  41. 		super();
  42. 	}
  43.  
  44. 	public void doGet(HttpServletRequest request, HttpServletResponse response) {
  45. 		doHandle(request, response);
  46. 	}
  47.  
  48. 	public void doPost(HttpServletRequest request, HttpServletResponse response) {
  49. 		doHandle(request, response);
  50. 	}
  51.  
  52. 	public void doHandle(HttpServletRequest request, HttpServletResponse response) {
  53.  
  54. 		System.out.println("Image generation requested");
  55. 		try {
  56. 			getParameters(request);
  57. 			BufferedImage image = new BufferedImage(imageWidth, imageHeight, BufferedImage.TYPE_INT_RGB);
  58. 			Graphics2D gr = (Graphics2D) image.getGraphics();
  59. 			gr.setColor(Color.BLACK);
  60. 			gr.fillRect(0, 0, imageWidth, imageHeight);
  61. 			gr.setColor(Color.WHITE);
  62. 			gr.drawArc(0, 0, imageWidth, imageHeight, beginAngle, endAngle - beginAngle);
  63. 			int x1 = (int) (imageWidth / 2);
  64. 			int y1 = (int) (imageHeight / 2);
  65. 			double radBegin = beginAngle*Math.PI/180;
  66. 			double radend = endAngle*Math.PI/180;
  67. 			int x2 = (int) (x1 + Math.cos(radBegin) * (imageWidth / 2));
  68. 			int y2 = (int) (y1 - Math.sin(radBegin) * (imageHeight / 2));
  69. 			gr.drawLine(x1, y1, x2, y2);
  70. 			x2 = (int) (x1 + Math.cos(radend) * (imageWidth / 2));
  71. 			y2 = (int) (y1 - Math.sin(radend) * (imageHeight / 2));
  72. 			gr.drawLine(x1, y1, x2, y2);
  73. 			response.setContentType("image/jpg");
  74. 			response.setHeader("Content-disposition", "inline; filename=test.jpg");
  75. 			JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(response.getOutputStream());
  76. 			encoder.encode(image);
  77. 		} catch (IOException e) {
  78. 			e.printStackTrace();
  79. 		}
  80. 	}
  81.  
  82. 	private void getParameters(HttpServletRequest request) {
  83.  
  84. 		imageWidth = 320;
  85.  
  86. 		String param = null;
  87. 		try {
  88. 			if ((param = request.getParameter(REQ_PARAM_BEGIN_ANGLE)) != null)
  89. 				beginAngle = Integer.parseInt(param);
  90. 		} catch (Exception e) {
  91. 			beginAngle = 0;
  92. 		}
  93.  
  94. 		try {
  95. 			if ((param = request.getParameter(REQ_PARAM_END_ANGLE)) != null)
  96. 				endAngle = Integer.parseInt(param);
  97. 		} catch (Exception e) {
  98. 			endAngle = 180;
  99. 		}
  100.  
  101. 		try {
  102. 			if ((param = request.getParameter(REQ_PARAM_IMG_WIDTH)) != null)
  103. 				imageWidth = Integer.parseInt(param);
  104. 		} catch (Exception e) {
  105. 			imageWidth = 320;
  106. 		}
  107.  
  108. 		try {
  109. 			if ((param = request.getParameter(REQ_PARAM_IMG_HEIGHT)) != null)
  110. 				imageHeight = Integer.parseInt(param);
  111. 		} catch (Exception e) {
  112. 			imageHeight = 200;
  113. 		}
  114. 	}
  115. }



Créez ensuite le fichier web.xml suivant dans le répertoire WEB-INF de votre appliction: 


  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app
  3. 	xmlns="http://java.sun.com/xml/ns/j2ee"
  4. 	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  5. 	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
  6. 	version="2.4">
  7.  
  8. 	<servlet>
  9. 		<servlet-name>BasicGenerator</servlet-name>
  10. 		<servlet-class>be.fery.dynamicImage.control.BasicImageGeneratorServlet</servlet-class>
  11. 	</servlet>
  12.  
  13. 	<servlet-mapping>	
  14. 		<servlet-name>BasicGenerator</servlet-name>
  15. 		<url-pattern>/BasicGenerator</url-pattern>
  16. 	</servlet-mapping>		
  17. </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: 

  1. <html>
  2. 	<head>
  3. 		<script type="text/javascript" language="javascript">
  4. 			var tOut = 2000;
  5. 			var tId = null;
  6. 			function updateGraphics(){
  7. 				document.getElementsByName('endAngle')[0].value=parseInt(document.getElementsByName('endAngle')[0].value)+10;
  8. 				getImage();				
  9. 				tId = setTimeout("updateGraphics()",tOut);
  10. 			}
  11.  
  12. 			function startUpdate(){
  13. 				document.getElementsByName('image')[0].style.display="block";
  14. 				document.getElementsByName('stopButton')[0].disabled=false;
  15. 				document.getElementsByName('startButton')[0].disabled=true;
  16. 				updateGraphics();
  17. 			}
  18.  
  19. 			function stopUpdate(){
  20. 				clearTimeout(tId);
  21. 				document.getElementsByName('startButton')[0].disabled=false;
  22. 				document.getElementsByName('stopButton')[0].disabled=true;
  23. 			}
  24.  
  25. 			function getImage(){
  26. 				var url = "http://<votre_serveur>:<votre_port>/imageGenerator/BasicGenerator";
  27. 				url += "?imageWidth="+getFieldValue('imageWidth');
  28. 				url += "&imageHeight="+getFieldValue('imageHeight');
  29. 				url += "&beginAngle="+getFieldValue('beginAngle');
  30. 				url += "&endAngle="+getFieldValue('endAngle');
  31. 				document.getElementsByName('image')[0].src=url;
  32. 			}
  33.  
  34. 			function getFieldValue(fieldName){
  35. 				document.getElementsByName('image')[0].style.display="block";
  36. 				return  document.getElementsByName(fieldName)[0].value;
  37. 			}
  38. 		</script>
  39. 	</head>
  40.  
  41. 	<body>
  42. 		<table>
  43. 			<tr>
  44. 				<td><button id="startButton" name="startButton" type="button" onclick="javascript:startUpdate();">Start</button></td>
  45. 				<td><button id="stopButton" name="stopButton" type="button" onclick="javascript:stopUpdate();" disabled>Stop</button></td>
  46. 			</tr>
  47. 			<tr>
  48. 				<td>Largeur de l'image:</td><td><input type="text" name="imageWidth" value="480"/></td>
  49. 				<td>Hauteur de l'image:</td><td><input type="text" name="imageHeight" value="200"/></td>
  50. 			</tr>			
  51. 			<tr>				
  52. 				<td>Angle de départ:</td><td><input type="text" name="beginAngle" value="0"/></td>
  53. 				<td>Angle de fin:</td><td><input type="text" name="endAngle" value="360"/></td>
  54. 			</tr>			
  55. 			<tr>				
  56. 				<td colspan="2"><button type="button" onclick="javascript:getImage();"/>Voir l'image</button></td>
  57. 			</tr>			
  58. 			<tr>
  59. 				<td colspan="2">
  60. 					<img id="image" name="image" style="display: none;"/>
  61. 				</td>
  62. 			</tr>
  63. 		</table>
  64. 	</body>
  65. </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: 

  1. //Création d'un image
  2. 			BufferedImage image = new BufferedImage(imageWidth, imageHeight, BufferedImage.TYPE_INT_RGB);
  3. //Récupération de l'objet Graphics de cette image que l'on caste en Graphics2D
  4. 			Graphics2D gr = (Graphics2D) image.getGraphics();
  5. //On dessine sur l'objet Graphics2D
  6. 			gr.setColor(Color.BLACK);
  7. 			gr.fillRect(0, 0, imageWidth, imageHeight);
  8. 			gr.setColor(Color.WHITE);
  9. 			gr.drawArc(0, 0, imageWidth, imageHeight, beginAngle, endAngle - beginAngle);
  10. 			int x1 = (int) (imageWidth / 2);
  11. 			int y1 = (int) (imageHeight / 2);
  12. 			double radBegin = beginAngle*Math.PI/180;
  13. 			double radend = endAngle*Math.PI/180;
  14. 			int x2 = (int) (x1 + Math.cos(radBegin) * (imageWidth / 2));
  15. 			int y2 = (int) (y1 - Math.sin(radBegin) * (imageHeight / 2));
  16. 			gr.drawLine(x1, y1, x2, y2);
  17. 			x2 = (int) (x1 + Math.cos(radend) * (imageWidth / 2));
  18. 			y2 = (int) (y1 - Math.sin(radend) * (imageHeight / 2));
  19. 			gr.drawLine(x1, y1, x2, y2);
  20. //IMPORTANT: définir le type de contenu de la réponse
  21. 			response.setContentType("image/jpg");
  22. //Définir le contenu comme étant "inline" et, éventuellement, spécifier un nom pour l'image générée
  23. 			response.setHeader("Content-disposition", "inline; filename=test.jpg");
  24. //Instancier un JPEGImageEncoder en lui passant le flux sur lequel il devra envoyer l'image
  25. 			JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder
  26. (response.getOutputStream());
  27. //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
  28. 			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

Avatar :: HackTrack Un article de HackTrack, lu 553 fois.
Modifié 1 fois. (dernière modification le Lundi 29 Janvier 2007, 13:37 par HackTrack)



Source : indéterminée


Commenter l'article

Créer un web service avec visual studioAlterner la couleur des lignes dans une JTable

Commentaires

Sélection, tri et recherche d'articles
FILTRER :
TRIER :1er critère : 2e critère :
CHERCHER : Dans les titres Dans le contenu


[Afficher les liens en fonction des critères du formulaire ci-dessus]

 

<- Les niouzes   Portail NewsBrol ->

Réseaux sociaux

|Plus d'options...

Vous pouvez modifier vos préférences dans votre profil pour ne plus afficher les interactions avec les réseaux sociaux sur ces pages.

 

Nuage de mots clés

319 mots clés dont 1 définis manuellement (plus d'information...).

<img </td> <td <td><button <td>Angle <td>Hauteur <td>Largeur beginAngle clearTimeout document.getElementsByName endAngle getImage imageHeight imageWidth return tId updateGraphics url var </tr> </tr> <tr> <tr> beginAngle BufferedImage double e.printStackTrace encoder.encode endAngle function getParameters gr.drawArc gr.drawLine gr.fillRect gr.setColor Graphics2D imageHeight imageWidth int JPEGImageEncoder response.setContentType response.setHeader var </script> </table> <script <servlet-class>be.fery.dynamicImage.control.BasicImageGeneratorServlet</servlet-class> <servlet-name>BasicGenerator</servlet-name> <table> <url-pattern>/BasicGenerator</url-pattern> doHandle imageWidth String super System.out.println </body> </head> </servlet-mapping> </servlet> <body> <head> <servlet-mapping> <servlet> private public version= xmlns:xsi= xmlns= xsi:schemaLocation= &beginAngle= &endAngle= &imageHeight= +getFieldValue .disabled=false .disabled=true .src=url .style.display= .value .value=parseInt //Appeler //Création //Définir //IMPORTANT: //Instancier //Récupération /></td> />Voir /syntax </html> </web-app> <html> <web-app ><button >Start</button></td> adapter allons apparaître appliction: arrête astuce attention BasicImageGeneratorServlet be.fery.dynamicImage.control Beaucoup beginAngle beginAngle*Math.PI/180 bouton BufferedImage BufferedImage.TYPE_INT_RGB button champs chronomètre classe client cliquez Color.BLACK Color.WHITE colspan= com.sun.image.codec.jpeg.JPEGCodec com.sun.image.codec.jpeg.JPEGImageEncoder Commencez Content-disposition contenu contient copier corresponde Created créer Créez côté dessine devoir devrait directement disabled>Stop</button></td> discuté display: document.getElementsByName doHandle doPost dynamiquement début définir déjà Démarrer départ:</td><td><input déployer encode encoder encoder: encoding= endAngle endAngle*Math.PI/180 ensuite envoyer essayer Exception exemple. Exercice extends fermé fichier fichiers fieldName filename=test.jpg fin:</td><td><input fonction fournies Gaudry generation getFieldValue getImage getParameters Graphics Graphics2D Graphics2D Générer générer. générée générée HackTrack hauteur horloge... HTML. html4strict http://<votre_serveur>:<votre_port>/imageGenerator/BasicGenerator http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd http://www.w3.org/2001/XMLSchema-instance HTTPServlet HttpServletRequest HttpServletResponse image image.getGraphics image/jpg image:</td><td><input image</button></td> imageHeight images imageWidth imageWidth= import incrémentée inline Integer.parseInt intéressant: IOException JAVA java.awt.Color java.awt.geom.Arc2D java.awt.geom.Rectangle2D java.awt.Graphics java.awt.Graphics2D java.awt.image.BufferedImage java.awt.Shape java.io.IOException javascript Javascript. javascript:getImage javascript:startUpdate javascript:stopUpdate javax.servlet.http.HttpServlet javax.servlet.http.HttpServletRequest javax.servlet.http.HttpServletResponse JPEGCodec.createJPEGEncoder JPEGCodec.createJPEGEncoder JPEGImageEncoder language= largeur lequel Math.cos Math.sin modifier méthode navigateur. onclick= package paramètres parser passant passons passés permet petite petites physiqument plusieurs possible posés pouvez pratique... public publié question radBegin radend regénérée représentant REQ_PARAM_BEGIN_ANGLE REQ_PARAM_END_ANGLE REQ_PARAM_IMG_HEIGHT REQ_PARAM_IMG_WIDTH request request.getParameter requested requête. response response.getOutputStream référencer répertoire réponse réponse savoir secondes serveur serveur! servlet servlet servlet: setTimeout Signaler une erreur smiley smileys! sortie spécifier startButton startUpdate static Steph! stocker stopButton stopUpdate String style= Stéphane Gaudry suivant suivant: suivante supprimer syntax= sûrement taille text/javascript tip Tomcat toutes trouve updateGraphics utilisation valeur valeurs value= version= voilou! WEB-INF web.xml étant étend éventuellement

Vous pouvez modifier vos préférences dans votre profil pour ne plus afficher le nuage de mots clés.

 

Structure du document

Astuce pour imprimer les couleurs des cellules de tableaux : http://www.gaudry.be/ast-rf-450.html

© Ce document issu de l′infobrol est enregistré sous le certificat Cyber PrInterDeposit Digital Numbertection. Enregistrement IDDN n° 5329-419
Document créé le 13/09/04 00:00, dernière modification le Vendredi 17 Juin 2011, 12:11
Source du document imprimé : http://www.gaudry.be/ast.html Document affiché 6776 fois ce mois de Mai.
St.Gaudry©07.01.02
 
l'infobrol
Nous sommes le Mercredi 30 Mai 2012, 13:45, toutes les heures sont au format GMT+1.00 Heure, heure d'été (+1)