This tutorial will show how to generate PNG images on the fly and display inside a GSP. This can serve as a basis on how to create a more complex behavior. For example, creating report graphs for display in your applications.
package asia.grails.test import javax.imageio.ImageIO import java.awt.Color import java.awt.Graphics import java.awt.image.BufferedImage class TestImageController { def square(int size, String color) { BufferedImage buffer = new BufferedImage(size, size, BufferedImage.TYPE_INT_RGB); Graphics g = buffer.createGraphics(); Color gfxColor = new Color(Integer.parseInt(color, 16)); g.setColor(gfxColor); g.fillRect(0,0,size,size); response.setContentType("image/png"); OutputStream os = response.getOutputStream(); ImageIO.write(buffer, "png", os); os.close(); } def circle(int size, String color) { BufferedImage buffer = new BufferedImage(size, size, BufferedImage.TYPE_INT_RGB); Graphics g = buffer.createGraphics(); g.setColor(Color.WHITE); g.fillRect(0,0,size,size); Color gfxColor = new Color(Integer.parseInt(color, 16)); g.setColor(gfxColor); g.fillArc(0, 0, size, size, 0, 369); response.setContentType("image/png"); OutputStream os = response.getOutputStream(); ImageIO.write(buffer, "png", os); os.close(); } }
For both actions, a BufferedImage is created that will hold the resulting image. The image buffer is manipulated via the Graphics class. The resulting image binary is streamed to the user via the response.outputStream object. The content type should be set so that the browser will be able to understand that the incoming binary is an image.
A square image with 80 pixel sides and cyan color is generated If we access this URL: http://localhost:8080/forum/testImage/square?size=80&color=0ff0ffTo render the images inside GSP is straightforward. Here is a sample Controller and GSP.
package asia.grails.test class TestController { def index() {} }index.gsp
<%@ page import="asia.grails.forum.DiscussionThread" %> <!DOCTYPE html> <html> <head> <meta name="layout" content="main"> <title>Image Test</title> </head> <body> <g:img dir="testImage" file="square?size=150&color=ff0000"/> <g:img dir="testImage" file="square?size=50&color=00ff00"/> <g:img dir="testImage" file="square?size=75&color=0000ff"/> <g:img dir="testImage" file="circle?size=125&color=00ffff"/> <g:img dir="testImage" file="circle?size=25&color=ff00ff"/> <g:img dir="testImage" file="circle?size=225&color=ffff00"/> </body> </html>The dir is mapped to a controller and file maps to the action plus the request parameters.
The result is the image shown below: