aspx 페이지에서 동적으로 이미지 생성하기

aspx 페이지에서 동적으로 이미지 생성하기

웹 프로그래밍을 하다 보면, 서버에서 동적으로 이미지를 생성해서 클라이언트에 보여주어야할 경우가 가끔 생깁니다. asp에서는 서버 컴포넌트가 없으면 불가능한 일이었으나, asp.net에서는 닷넷 프레임워크의 GDI+를 사용해서 이러한 작업이 가능해졌습니다.

 

 

안녕하세요 Kenial입니다 : )

 

오늘도 약간은 변칙적인 기술입니다.

(실제로는 많이들 쓰고 계신 것 같지만...)

 

웹 프로그래밍을 하다 보면, 서버에서 동적으로 이미지를 생성해서 클라이언트에 보여주어야할 경우가 가끔 생깁니다. asp에서는 이미지를 처리할 수 있는 서버 컴포넌트가 없으면 (그리고 그 컴포넌트를 구매하지 않으면!) 불가능한 일이었으나, asp.net에서는 닷넷 프레임워크(정확히는 GDI+)를 사용해서 이러한 기능을 제공할 수 있게 되었습니다.

 

자, 그럼 시작해 보겠습니다.

 

 

asp를 넘어서 asp.net으로

 

asp(active server page)는 확실히 '쉬운 웹 프로그래밍 언어'로써 자리매김하는데에 성공했고, 웹 프로그래밍 관련 기술이 필요했던 수많은 MS 기반 기술의 개발자들을 끌어들이는데 성공했다. 하지만, '쉬운 언어'를 강조한 나머지, asp는 많은 기능을 외부의 컴포넌트에 의지하는 형태가 되었으며, 이런 asp의 특성은 웹 개발자에게 asp의 지식 뿐만 아니라 서버측 컴포넌트 개발 및 ActiveX 기술까지 섭렵해야 하는 난처한 상황을 만들어버렸다.

 

asp.net에서도 어떻게 보면 상황은 그렇게 크게 달라진 것 같지는 않다. 기존 asp에서 제공하는 것 이상의 기능을 원한다면, 역시 닷넷 프레임워크 전반에 대해서 이해해야 원하는 기능을 구현할 수 있는 것이다.

 

하 지만 vs.net에서는 '개발 환경 통합'이라는 강점이 있다. C#이나 VB.net이란 새로운 언어를 익히는데에 드는 시간을 투자한다면, asp.net에서 제공되는 기능 뿐만 아니라 (아직 닷넷 프레임워크 전체를 잘 이해할 수는 없더라도) 그외의 다른 기능들을 구현할 수 있는 기술을 얻을 수 있게 되는 것이다.

 

서두가 길고 본문이 짧은 기형적인 글이 되기 전에 이만 마치고, asp.net의 기능을 확장해보는 예제로서, .aspx 파일로 동적인 이미지를 생성하는 예제를 보이도록 하겠다.

 

 

aspx 파일로 동적인 이미지 생성하기

 

이 아티클의 내용으로 구현할 수 있는 것은 다음과 같다 :

 

    웹 페이지에 <img src="ImageMake.aspx">와 같은 태그를 넣으면, ImageMake.aspx 파일에서 임의로 생성한 이미지를 웹 브라우저에 표시한다.

 

먼 저, aspx 파일을 이미지 파일(여기서는 편의상 jpeg 파일을 기준으로 하겠다)로 인식하게 하려면, 해당 파일의 ContentType을 설정함으로써 브라우저가 서버로부터 "ImageMake.aspx 파일은 image/jpeg 형식의 파일이다"라는 정보를 받도록 해야 한다.

 

이런 설정은 aspx 페이지에서 페이지 지시자를 사용해서 설정할 수 있다 : (페이지 속성을 수정해도 상관없다)

 

 

- ImageMake.aspx 파일

	<%@ Page Language="c#" ContentType="image/jpeg" Codebehind="ImageMake.aspx.cs" Inherits="Test.ImageMake" AutoEventWireup="false" %>

 

위와 같이 ContentType을 설정했으면, 이제 cs 파일에서 Page_Load 이벤트 핸들러를 코딩하도록 하자 :

 

- ImageMake.aspx.cs 파일

	using System.Drawing.Imaging; ... private void Page_Load(object sender, System.EventArgs e) { // 여기에 사용자 코드를 배치하여 페이지를 초기화합니다.. Bitmap oBitmap; Graphics oGraphics; System.Drawing.Image oImage;   // 240x294에 24비트 컬러 비트맵을 생성 oBitmap = new Bitmap( 240, 294,     System.Drawing.Imaging.PixelFormat.Format24bppRgb ); // GDI+로 그림을 그리기 위한 Graphics 객체를 생성 oGraphics = Graphics.FromImage( oBitmap );   // 굵기가 2인 검은색 펜을 생성 Pen pen = new Pen(Color.White, 2); // 선을 그을 각 정점 위치를 저장하는 배열을 만든다 Point[] nPoints = new Point[5]; nPoints[0].X = 10; nPoints[0].Y = 10; nPoints[1].X = 100; nPoints[1].Y = 10; nPoints[2].X = 100; nPoints[2].Y = 100; nPoints[3].X = 10; nPoints[3].Y = 100; nPoints[4].X = 10; nPoints[4].Y = 10;   // 선을 긋는다. oGraphics.DrawLines(pen, nPoints);   // 그려진 그래픽 파일을 Jpeg 포맷으로 전송한다 oBitmap.Save( Response.OutputStream, ImageFormat.Jpeg ); }

 

이렇게 코딩한 다음에 컴파일을 마치고, <Img src="ImageMake.aspx"> 태그를 넣은 임의의 html을 브라우저에 띄우면 하얀 사각형이 그려진 jpeg 파일을 볼 수 있을 것이다.

 

결과 화면 :

(귀찮아서 그냥 만드느라 WebForm2.aspx 파일로 생성함)

 

 

정리

 

Kenial 이 활동하고 있는, 마이크로소프트의 asp 뉴스그룹(microsoft.public.kr.asp.qna)에 가 보면 'asp로도 괜찮은데 왜 asp.net을 써야 합니까?'라는 질문이 가끔 올라옵니다. 물론 asp.net은 asp에 비해서 '웹 프로그래밍 언어로서' 여러가지 추가적인 기능을 지원하고, 성능상이든 편의상이든 많은 이점이 있습니다.

 

하지만 제 경우에는 그런 모든 성능과 편의성을 제외하고서라도, 'asp.net 코드이든 일반 Windows Form 기반의 프로그램이든 동일한 코드를 공유할 수 있다'라는 점이 무엇보다도 매력으로 느껴집니다. 방금 위에 예제로 든 코드조차도, 스트림을 이용해 출력하는 코드만 제외한다면 일반 C# 어플리케이션에서도 그대로 동작하는 코드입니다. 이런 특성은 코드 재사용을 용이하게 하며, 웹과 어플리케이션 개발 환경을 오가는 상황에서도 적용될 수 있습니다.

 

오늘은 서두도 길고, 꼬리도 긴 아티클이 되어버렸군요 ^^;

 

그럼 : )