강좌
클라우드/리눅스에 관한 강좌입니다.
프로그램 분류

동적이미지 생성

작성자 정보

  • 웹관리자 작성
  • 작성일

컨텐츠 정보

본문

icon01.gif title02.gif
애플릿으로는 그림을 그려서 웹브라우저에서 볼 수 있었습니다. 그럼 JSP 로 그림을 그릴 수 있을까요? 정답은 YES 입니다. 하지만 지금까지는 No 였습니다. 아무도 가르쳐주는 사람이 없어요. 엉엉~ 나 어떻해 회사 쫓겨나면... 우리 아이 먹을 것 입을 것 사려면 아내가 버는 돈만으로는 부족한데... 다행히 모유 먹으니까 우유값은 안드는데, 종이 기저귀는 어떻하라구... <-- 어제까지 저의 모습이었습니다.

하하, 꺼떡없슴다. 거저 옌변에서는 JSP 로 그림그리는 것은 jsp 축에도 못낍니다. 헤헤 농담 그만하고, ^^ 소스 공개합니다. 아니, 방법을 공개합니다.

주식현황 그래프나, 방문통계그래프 등을 그릴 수 있습니다. 한가지 기억해야 할 것은 공개프로그램을 내놓고 많은 사람들의 수고를 덜어주는 라이브러리 개발자들에게 감사해야 한다는 것입니다. java 로 공개된 라이브러리 중에 www.acme.com 에서 나온 GifEncoder 가 가장 유명합니다. 이 밖에도 jclass도 있고, 저도 알지 못하는 여러 공개된 소스가 있을 겁니다. 일반적으로 많이 쓰이는 www.acme.com 패키지를 사용하도록 하겠습니다.

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 랑 얘기를 해봐야겠네요. 일단 윈도우에서 돌리는 것만 가정하겠습니다.

소스의 출처는 한빛미디어에서 나온 서블릿프로그래밍 책입니다. 서블릿 소스인데, 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-INFclasses 아래로 이동합니다. 어딘지 아시죠? 아니면 제가 Tips 게시판에 올려놓은 Acme.jar 파일을 c:jdk1.3jrelibext 에 복사시켜 놓아도 됩니다.
gifencode01_03.gif

이제 설치는 끝났습니다. 소스를 보죠.

imageCall.html
<html>
<body bgcolor="#000000">
<img src="HelloGraphics.jsp">
</body>
</html>

HelloGraphics.js

<%@ 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();
}
%>

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 도 만들 수 있겠죠.

마지막으로 막대그래프 하나 그리고 끝내도록 하겠습니다. 원리는 이렇습니다.
숫자들을 배열에 놓고 맥시멈 값을 구합니다. 이미지 크기에 맞춰서 비율을 결정합니다.
배열의 length 로 이미지 폭을 나눕니다. 그리고 그려주면 됩니다.
난수를 10 개 만들어서 동적으로 이미지를 생성해보도록 하겠습니다.

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

오늘 강좌가 많은 도움이 되길 바랍니다. 밤을 새버렸네요. 내일 회사가서 졸지나 않을래나....

http://okjsp.pe.kr

관련자료

댓글 0
등록된 댓글이 없습니다.

공지사항


뉴스광장


  • 현재 회원수 :  60,037 명
  • 현재 강좌수 :  35,812 개
  • 현재 접속자 :  146 명