はじめに
前回までの説明で、Graphics/Graphics2Dによる図形描画の基本については一通り分かりました。今回はイメージの描画について説明を行います。ファイルからの読み込みや書き出し、イメージの描画、そしてイメージを加工するためのクリッピングなどについて説明を行いましょう。
過去の記事
- 第1回 JSP/サーブレットでイメージを生成する
- 第2回 Graphics2Dによる描画
対象読者
- Javaの基本およびJavaによるWeb開発の基礎(JSP/サーブレット程度)をマスターしている人。
- グラフィック関連のプログラミング経験があまりない人。
- Javaのグラフィック処理を学び直したい人。
イメージファイル・アクセス
イメージを利用する場合には、「イメージファイルからのイメージの読み込み」「イメージの加工」「イメージのファイルへの書き出し」といった操作を行うことになります。サーバサイドでは、場合によってファイルへの書き出しを行わず直接クライアントへ送信することもあるでしょうが、ここではファイル利用の基本ということで保存までをセットで考えることにしましょう。
イメージファイルの読み書きは、以前はかなり大変でした。読み込みはそうでもありませんが、書き出しがかなり制約されていたのです。また、扱えるファイルのフォーマットも限定されていました。今現在、広く使われているJava2 5.0/6.0についてはこれらの点が改良されているので、かなり簡単にイメージファイルを利用することができます。
では、これも簡単なサンプルを用意して説明することにしましょう。ファイル名を送信すると、そのファイルを読み込んで加工し、指定のファイル名で保存するサーブレットを作成します。これをJSPを通じてアクセスすることで、イメージの加工処理を行わせることにします。
まずは、フロントエンドとなるJSPからです。ここでは「test.jsp」というファイル名で用意しておくことにします。
<%@ page language="java" contentType="text/html; charset=Shift_JIS" pageEncoding="Shift_JIS"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>Insert title here</title> </head> <body> ※編集するファイル名<br> <form method="post" action="./graphicsImg"> <input type="text" name="path"> <input type="submit"> </form> <br><br> ※元のイメージ<br> <img src="./<%=request.getParameter("path") %>"> <br><br> ※保存されたイメージ<br> <img src="./new_saved.png"> </body> </html>
ここでは、フォームからファイル名を「./grahicsImg」に送信するようにしてあります。またその下に、送信したファイル名と、それを元に新たに保存されたイメージ(new_saved.png)をimg
タグで表示するようにしてあります。元のイメージと保存されたイメージを並べて表示し、比較するようにしてみました。
サーブレットの作成
続いて、サーブレットの作成です。ここでは「SampleGraphicsFromImageFile」というクラスとして用意し、これを「/graphicsImg」というURIでアクセスできるようにしておきます。
package jp.tuyano.codezine; import java.awt.*; import java.awt.image.*; import java.io.*; import javax.imageio.*; import javax.servlet.*; import javax.servlet.http.*; public class SampleGraphicsFromImageFile extends HttpServlet implements javax.servlet.Servlet { private static final long serialVersionUID = 1L; public SampleGraphicsFromImageFile() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doAction(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doAction(request, response); } public void doAction(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String fname = request.getParameter("path"); String dir = getServletContext().getRealPath("/"); BufferedImage im = null; // イメージの読み込み File f = new File(dir + fname); if (f.exists()) { try { im = ImageIO.read(f); } catch (IOException e) { System.out.println("can't read from file."); im = new BufferedImage(300,200, BufferedImage.TYPE_INT_RGB); // 仮のイメージ } } else { im = new BufferedImage(300,200, BufferedImage.TYPE_INT_RGB); // 仮のイメージ } // イメージ描画 im = getModifiedImage(im); // イメージの書き出し FileOutputStream out = null; try { out = new FileOutputStream(dir + "new_saved.png"); ImageIO.write(im,"png",out); out.flush(); } catch (IOException e) { e.printStackTrace(); } finally{ try { out.close(); } catch (IOException e1) { e1.printStackTrace(); } } // リダイレクト getServletContext().getRequestDispatcher("/test.jsp") .forward(request, response); } // 描画処理 public BufferedImage getModifiedImage(BufferedImage im){ Graphics2D g = im.createGraphics(); g.setColor(Color.BLACK); g.setFont(new Font("Monospace",Font.BOLD,24)); g.drawString("Modified Image.", 26, 26); g.drawString("Modified Image.", 23, 23); g.setColor(Color.RED); g.drawString("Modified Image.", 24, 24); g.dispose(); return im; } }
<servlet> <description> </description> <display-name> SampleGraphicsFromImageFile</display-name> <servlet-name>SampleGraphicsFromImageFile</servlet-name> <servlet-class> jp.tuyano.codezine.SampleGraphicsFromImageFile</servlet-class> </servlet> <servlet-mapping> <servlet-name>SampleGraphicsFromImageFile</servlet-name> <url-pattern>/graphicsImg</url-pattern> </servlet-mapping>
JSPからファイル名を送信すると、そのファイル名のイメージを読み込み、テキストを追加して表示します。イメージファイルは適当なものを用意してください。