JSP로 이미지 생성하기kenu2001-09-11 5:51오전
애플릿으로는 그림을 그려서 웹브라우저에서 볼 수 있었습니다. 그럼 JSP 로 그림을 그릴 수 있을까요? 정답은 YES 입니다. 하지만 지금까지는 No 였습니다. 아무도 가르쳐주는 사람이 없어요. 엉엉~ 나 어떻해 회사 쫓겨나면... 우리 아이 먹을 것 입을 것 사려면 아내가 버는 돈만으로는 부족한데... 다행히 모유 먹으니까 우유값은 안드는데, 종이 기저귀는 어떻하라구... <-- 어제까지 저의 모습이었습니다.
/images/spacer.gif
하하, 꺼떡없슴다. 거저 옌변에서는 JSP 로 그림그리는 것은 jsp 축에도 못낍니다. 헤헤 농담 그만하고, ^^ 소스 공개합니다. 아니, 방법을 공개합니다.
/images/spacer.gif
주식현황 그래프나, 방문통계그래프 등을 그릴 수 있습니다. 한가지 기억해야 할 것은 공개프로그램을 내놓고 많은 사람들의 수고를 덜어주는 라이브러리 개발자들에게 감사해야 한다는 것입니다. java 로 공개된 라이브러리 중에 www.acme.com 에서 나온 GifEncoder 가 가장 유명합니다. 이 밖에도 jclass도 있고, 저도 알지 못하는 여러 공개된 소스가 있을 겁니다. 일반적으로 많이 쓰이는 www.acme.com 패키지를 사용하도록 하겠습니다.
/images/spacer.gif
test 환경은 Tomcat 3.2.3 과 windows 2000 professional , 그리고 apache 1.3.20 입니다. 아! jdk는 1.3.1_02 입니다. 버전이 달라서 안되는 경우는... 으악~ 살려주세요. T.T; 가능하면 버전 맞춰서 테스트해보세요. Linux/Unix 환경일 경우는 x Window 상태에서 xhost localhost 라고 해줘야 한다네요. 이쪽은 울 회사 SE 랑 얘기를 해봐야겠네요. 일단 윈도우에서 돌리는 것만 가정하겠습니다.
/images/spacer.gif
소스의 출처는 한빛미디어에서 나온 서블릿프로그래밍 책입니다. 서블릿 소스인데, jsp 로 바꾼 것 뿐입니다. 아, 그전에 www.acme.com 사이트에 가서 패키지를 다운받아와야지요. http://www.acme.com/java/software/Acme.JPM.Encoders.GifEncoder.html 입니다.
gifencode01_01.gif
GifEncoder의 API 가 나옵니다. package 전체를 다운받으도 됩니다. Fetch the entire ACME package 를 클릭하면 ACME 패키지 전체가 gzip으로 압축된 것을 다운받을 수 있습니다.
gifencode01_02.gif
다운받은 Acme.tar.gz을 알집을 이용해서 압축을 풉니다. 필요한 파일이, Acme 라는 디렉토리 안에 JPM 디렉토리가 있고 그 안에는 Encoders 라는 디렉토리가 있고 그 안에는 class 파일이 두개 있습니다. Acme 디렉토리를 WEB-INF\classes 아래로 이동합니다. 어딘지 아시죠? 아니면 제가 Tips 게시판에 올려놓은 Acme.jar 파일을 c:\jdk1.3\jre\lib\ext 에 복사시켜 놓아도 됩니다.
gifencode01_03.gif
이제 설치는 끝났습니다. 소스를 보죠.
<소스 파일명="imageCall.html"><html>
<body bgcolor="#000000">
<img src="HelloGraphics.jsp">
</body>
</html>
<소스 파일명="HelloGraphics.jsp"><%@ page import="java.io.*, java.awt.*, Acme.JPM.Encoders.GifEncoder"
%><%
Frame frame = null;
Graphics g = null;
try {
// Create an unshown frame
frame = new Frame();
frame.addNotify();
// Get a graphics region, using the Frame
Image image = frame.createImage(200, 300); // image size width 200, height 300
g = image.getGraphics();
g.setFont(new Font("Serif", Font.ITALIC, 50));
g.drawString("JSP", 10, 50);
g.drawString("Image!", 10, 80);
g.setColor(new Color(0x0080AA));
g.setFont(new Font("Garamond", Font.PLAIN, 18));
g.drawString("www.okjsp.pe.kr", 60, 280);
// Encode the off screen image into a GIF and send it to the client
response.setContentType("image/gif");
GifEncoder encoder = new GifEncoder(image, response.getOutputStream());
encoder.encode();
}
finally {
// Clean up resources
if (g != null) g.dispose();
if (frame != null) frame.removeNotify();
}
%>
/images/spacer.gif
HelloGraphics.jsp 파일은 text/html 을 생성해 내는 것이 아니라, image/gif 형식의 파일을 생성해 냅니다. 그래서 img src="HelloGraphics.jsp" 처럼 호출할 수 있는 것이죠.
HelloGraphics.gif
한글은 여기서도 인코딩을 해줘야 되는 군요. 이렇게 변경해주시면 됩니다.
<소스>
String txt = "한글, Image!";
txt = new String(txt.getBytes("8859_1"),"euc-kr");
g.setFont(new Font("Gulim", Font.ITALIC, 30));
g.drawString("JSP", 10, 50);
g.drawString(txt, 10, 80);
HelloGraphics_kr.gif
여기에 관해서 관련자료들을 더 찾아보시기 바랍니다. jpeg 생성하는 라이브러리도 있고, 다양하게 응용할 수 있겠죠. 요즘 유행하는 avatar 도 만들 수 있겠죠.
/images/spacer.gif
마지막으로 막대그래프 하나 그리고 끝내도록 하겠습니다. 원리는 이렇습니다. 숫자들을 배열에 놓고 맥시멈 값을 구합니다. 이미지 크기에 맞춰서 비율을 결정합니다. 배열의 length 로 이미지 폭을 나눕니다. 그리고 그려주면 됩니다. 난수를 10 개 만들어서 동적으로 이미지를 생성해보도록 하겠습니다.
/images/spacer.gif
<소스 파일명="HelloGraphics.jsp"><%@ page import="java.util.*, java.io.*, java.awt.*, Acme.JPM.Encoders.GifEncoder"
%><%
// 계산
// 난수 발생
double [] num = new double[10];
for(int i=0;i<num.length; i++) {
num[i] = Math.random() * 100;
}
// 최대값
double max=num[0] ;
for(int i=1;i<num.length;i++) {
if(max<num[i])
max=num[i];
}
int margin = 10;
float x_pace = (300-margin*2) / (float)10;
float y_height = (float)(200-margin*2);
double ratio = y_height / max;
Frame frame = null;
Graphics g = null;
try {
// Create an unshown frame
frame = new Frame();
frame.addNotify();
// Get a graphics region, using the Frame
Image image = frame.createImage(300, 200); // image size width 300, height 200
g = image.getGraphics();
g.setColor(new Color(0x0040FF));
g.setFont(new Font("System", Font.PLAIN, 11));
g.drawString("www.okjsp.pe.kr", 210, 198);
g.drawString("Max:"+max, 10, 198);
// draw Bars
int xx = 0;
int yy = 0;
g.setColor(new Color(0x000000));
g.drawRect(0,0,299,199);
for (int i=0; i<num.length; i++) {
xx = (int)(i * x_pace) + margin;
yy = (int)(num[i] * ratio);
yy = 200 - (yy + margin);
g.drawRect(xx, yy, (int)x_pace-3, 188 - yy);
g.drawString(""+(int)num[i], xx+9, yy);
}
// Encode the off screen image into a GIF and send it to the client
response.setContentType("image/gif");
GifEncoder encoder = new GifEncoder(image, response.getOutputStream());
encoder.encode();
}
finally {
// Clean up resources
if (g != null) g.dispose();
if (frame != null) frame.removeNotify();
}
%>
HelloGraphics2.gif
오늘 강좌가 많은 도움이 되길 바랍니다. 밤을 새버렸네요. 내일 회사가서 졸지나 않을래나....
/images/spacer.gif
http://www.acme.com/
강좌에서 소개한 사이트입니다.
http://www.acme.com/java/software/Acme.JPM.Encoders.GifEncoder.html
다운받을 수 있는 곳입니다.4offline : [JSP] 이미지 만들어서 화면에 뿌리기.