{"id":773,"date":"2010-11-23T12:25:56","date_gmt":"2010-11-23T14:25:56","guid":{"rendered":"http:\/\/www.thiagovespa.com.br\/blog\/?p=773"},"modified":"2025-10-26T22:42:14","modified_gmt":"2025-10-27T01:42:14","slug":"gerar-imagens-dinamicas-com-servlets","status":"publish","type":"post","link":"https:\/\/thiagovespa.com.br\/blog\/2010\/11\/23\/gerar-imagens-dinamicas-com-servlets\/","title":{"rendered":"Gerar imagens din\u00e2micas com servlets"},"content":{"rendered":"

HTTP Servlets tem utilidade mais interessante do que apenas Front Controllers e gerar c\u00f3digo HTML. Um dos recursos mais bacanas \u00e9 a possibilidade de gerar conte\u00fado bin\u00e1rio em tempo de execu\u00e7\u00e3o. Nesse post demonstrarei como desenhar uma imagem din\u00e2mica utilizando Servlets. A id\u00e9ia veio da necessidade do C\u00e1ssio<\/a> em extrair p\u00e1ginas de PDF e exibir como imagens em uma aplica\u00e7\u00e3o Web.<\/p>\n

Vamos criar uma Servlet onde o usu\u00e1rio poder\u00e1 realizar uma requisi\u00e7\u00e3o via GET da URL \"imagem.png\" passando um par\u00e2metro \"texto\" e a Servlet ir\u00e1 retornar uma imagem com uma bolinha e o texto digitado.<\/p>\n

Estou utilizando Servlet 3.0, mas o c\u00f3digo do m\u00e9todo get pode ser utilizado em qualquer outra vers\u00e3o de Servlets sem necessidade de altera\u00e7\u00e3o.<\/p>\n

package br.com.thiagovespa.samples.imagem;\n\nimport java.awt.Color;\nimport java.awt.Font;\nimport java.awt.Graphics2D;\nimport java.awt.image.BufferedImage;\nimport java.io.IOException;\nimport java.io.OutputStream;\n\nimport javax.imageio.ImageIO;\nimport javax.servlet.ServletException;\nimport javax.servlet.annotation.WebServlet;\nimport javax.servlet.http.HttpServlet;\nimport javax.servlet.http.HttpServletRequest;\nimport javax.servlet.http.HttpServletResponse;\n\n\/**\n * Gera uma imagem com um texto passado por par\u00e2metro\n *\n * @author Thiago Galbiatti Vespa\n *\/\n@WebServlet("\/imagem.png")\npublic class ImagemServlet extends HttpServlet {\n\n\tprivate static final long serialVersionUID = 201011231103L;\n\n\tpublic ImagemServlet() {\n\t\tsuper();\n\t}\n\n\t@Override\n\tprotected void doGet(HttpServletRequest request,\n\t\t\tHttpServletResponse response) throws ServletException, IOException {\n\t\t\/\/ A imagem \u00e9 um png - Poderia ser qualquer outro tipo\n\t\tresponse.setContentType("image\/png");\n\n\t\t\/\/ Recupera o par\u00e2metro\n\t\tString text = request.getParameter("texto");\n\n\t\t\/\/ Cria uma imagem de tamanho 500x50\n\t\tBufferedImage image = new BufferedImage(500, 50,\n\t\t\t\tBufferedImage.TYPE_INT_ARGB);\n\n\t\t\/\/ Cria o canvas pra desenho\n\t\tGraphics2D canvas = image.createGraphics();\n\t\tcanvas.setColor(Color.BLUE);\n\t\t\/\/ Desenha um c\u00edrculo azul\n\t\tcanvas.fillOval(10, 10, 10, 10);\n\t\tcanvas.setColor(Color.RED);\n\t\tcanvas.setFont(new Font(Font.SANS_SERIF, Font.BOLD, 14));\n\t\t\/\/ Desenha o texto em vermelho\n\t\tcanvas.drawString(text != null ? text : "Nenhum texto informado!", 25,\n\t\t\t\t20);\n\t\tOutputStream out = null;\n\t\ttry {\n\t\t\tout = response.getOutputStream();\n\t\t\t\/\/ Escreve a imagem no outputstream da response no formato png\n\t\t\tImageIO.write(image, "PNG", out);\n\t\t} finally {\n\t\t\tif (out != null) {\n\t\t\t\tout.close();\n\t\t\t}\n\t\t}\n\t}\n\n}\n<\/pre>\n
Fiz v\u00e1rios coment\u00e1rios no c\u00f3digo para facilitar a compreens\u00e3o de quem est\u00e1 come\u00e7ando e para eu n\u00e3o precisar explicar linha a linha o que o c\u00f3digo est\u00e1 fazendo :). O c\u00f3digo importante\u00a0 para gerar qualquer conte\u00fado bin\u00e1rio \u00e9 o que est\u00e1 destacado na linha 35, que seta o mime-type correto para a servlet exibir e o da linha 56 que recupera o OutputStream (bin\u00e1rio) para escrever algum conte\u00fado nele.<\/p>\n
Para utilizar o mime-type correto pro seu tipo de conte\u00fado, voc\u00ea pode utilizar a tabela da W3School dispon\u00edvel nesse link: http:\/\/www.w3schools.com\/media\/media_mimeref.asp<\/a><\/p>\n
Agora \u00e9 s\u00f3 fazer o deploy de um projeto com essa Servlet e acess\u00e1-la passando um par\u00e2metro. O resultado voc\u00ea pode ver na imagem abaixo:<\/p>\n
\n
\"imagem.png<\/a>
imagem.png (500\u00d750)<\/figcaption><\/figure>\n
Para exibir dentro de uma p\u00e1gina HTML \u00e9 s\u00f3 referenciar o endere\u00e7o da Servlet no atributo src da tag img. Por exemplo:<\/p>\n
\n
\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/html4\/loose.dtd">\n<html>\n<head>\n<meta http-equiv="Content-Type" content="text\/html; charset=UTF-8">\n<title>Exemplo imagem<\/title>\n<\/head>\n<body>\nOlha minha imagem a&iacute; em baixo<br\/>\n<img src="imagem.png?texto=Imagem gerada!"\/>\n<\/body>\n<\/html>\n<\/pre>\n
O browser ir\u00e1 exibir o conte\u00fado da imagem gerada din\u00e2micamente:<\/p>\n
\n
\"Exemplo<\/a>
Exemplo imagem<\/figcaption><\/figure>\n
Agora \u00e9 s\u00f3 programar a Servlet para gerar o que voc\u00ea quiser!.<\/p>\n
Esse conceito \u00e9 utilizado para gera\u00e7\u00e3o de CAPTCHAs<\/a>, PDF, XLS, e outros arquivos bin\u00e1rios dinamicamente.<\/p>\n
\n