본문 바로가기
asp.net

[펌] ASP.NET에서 크기 조정된 이미지 출력하기 - 코리아인터넷닷컴

by 사우람 2010. 7. 12.

ASP.NET에서 크기 조정된 이미지 출력하기(1) (1) : 이미지 목록 보여주기

##########0*

필자는 어떠한 디렉터리에 있는 이미지들을 리스트로 출력하는 것에 대해서 질문을 받은 적이 있다. 필자는 이미지들을 간단히 리스트로 출력을 할 수 있었다. 하지만 폴더 안의 이미지들이 서로 다른 크기로 되어있기 때문에 이를 그대로 출력하면 보기가 않좋게 된다. 따라서 이번 기사에서는 이미지들의 크기를 특정 크기로 제한하여 출력하는 것에 대해서 다룰 것이다.

이 문제를 해결하기 위해서 필자는 특정 크기보다 이미지의 크기가 더 클 경우 이를 축소시키기로 하였다. 우리가 해야할 것은 두가지이다. 먼저 폴더 안의 이미지들을 리스트로 보여주는 것이고 두번째는 이미지의 크기를 제한하는 것이다. 이번장에서는 이미지들을 리스트로 보여주는 것에 대해서 보겠다.

폴더안의 파일 가져오기

닷넷 프레임웍은 웹 서버의 파일 시스템을 다룰수 있는 다양한 클래스들을 제공한다. 그 중에서 특히 Directory와 File 클래스는 매우 유용한 클래스이다. 예로 여러분이 새로운 텍스트 파일을 하나 만든다면 File.CreateText() 메서드를 사용하면 된다.

폴더 안의 파일들을 가져오려고 한다면 Directory.GetFiles() 메서드를 사용한다. 이 메서드는 폴더 경로와 함께 사용하여 파일의 경로를 문자 배열로 반환한다. 여러분은 이 메서드를 두가지 방식으로 사용할 수 있다.

filesInDirectory = Directory.GetFiles(directoryPath)

directoryPath의 파일 경로들은 문자 배열로 반환된다. 만약 여러분이 특정 확장자를 가진 파일만 가져오고자 한다면 다음과 같이 두번째 파라미터를 추가해주면 된다.

filesInDirectory = Directory.GetFiles(directoryPath, searchPattern)

searchPattern은 와일드카드 심볼을 사용한다. 예를 들어 여러분이 C:\SomeDir 폴더의 텍스트 파일만 가져오고 싶다면 다음과 같이 하면 된다.

string[] textFiles = Directory.GetFiles("C:\SomDir", "*.txt")

폴더안의 이미지 파일들의 목록을 가져왔으니 이제 남은 것은 웹 페이지에 뿌려주는 일이다. 모든 이미지들을 출력하기 위해서 다음과 같은 코드를 사용하였다. (폴더안에는 이미지 파일만 있기 때문에 패턴을 사용하지는 않았다.)

foreach(string s in Directory.GetFiles(ImageDirectoryPath)
{
   ...
}

그럼 foreach 블럭 안에는 어떠한 것이 들어가야 하는가? 루프가 실행되면서 문자 s 에는 파일의 물리적 경로가 들어가게 된다. 따라서 이미지를 보여주는 태그인 src 태그를 동적으로 생성하면 된다.

foreach(string s in Directory.GetFiles(ImageDirectoryPath)
{
   html = "<a href='/ImageDirectoryPath/"+Path.GetFileName(s)+"'>"+
	 "<img src='ImageDirectoryPath/"+Path.GetFileName(s)+"'>"+
	 "</a>";
}

Path.GetFileName() 메서드는 파일의 경로에서 파일 이름을 추출하는 역할을 한다. 문자 변수 s 에는 "C:\Images\Files.gif" 같은 형식으로 들어가 있다는 것을 명심하자. 그리고 추출한 파일이름을 사용하여 img 태그를 완성하였다.

이제 이를 웹 페이지에 출력을 하도록 하자. 필자는 여기서 DataList 컨트롤을 사용하였다. 데이터리스트 컨트롤에 보여주기 위해서는 문자 변수 html 값들을 배열 같은 것에 저장할 필요가 있다. 따라서 아래의 코드에서는 문자 변수 html 값을 ArrayList pics에 추가하는 코드를 볼 수 있다. 아래는 전체 코드이다.

##########1*
[HTML 부분]

##########2*
[코드 부분]

먼저 주의할 사항이 있는데 코드 부분에서 반드시 System.IO 네임스페이스를 추가해주어야 한다. 그래야만 Directory, File 클래스를 사용할 수 있다. 그리고 ArrayList 안의 내용을 출력하기 위해서 데이터리스트 컨트롤의 ItemTemplate 안에 바인딩 구문을 추가하였다.

이를 실행한 결과는 다음과 같다.

##########3*

결과를 보면 여러 이미지의 크기가 들쭉날쭉 한것을 볼 수 있다. 별로 보기에는 안좋다. 따라서 다음장에서는 동적으로 이 이미지들의 크기를 조정하는 것에 대해서 보도록 하겠다.



제공 : 코리아인터넷닷컴, a 2003년 02월 26일

ASP.NET에서 크기 조정된 이미지 출력하기(2) (2) : 동적으로 이미지 크기 조정

##########4*

저번장에서 우리는 어떻게 이미지들을 리스트처럼 웹페이지에 뿌려주는지에 대해서 보았다. 하지만 이미들의 크기가 다양해서 결과는 눈에 보기 좋은 형태가 아니었다. 따라서 이번장에서는 닷넷 프레임웍의 Image 클래스를 사용하여 동적으로 이미지 크기를 조정하는 것에 대해서 보겠다.

너비와 높이 정하기

먼저 해야될 것은 모든 이미지에 적용할 너비와 높이를 정하는 것이다. 데이터리스트 컨트롤에서 3 컬럼씩 보여주도록 하였기 때문에 필자는 이미지의 크기가 200 픽셀을 넘지 않도록 하였다. 또한 높이도 200 픽셀을 넘지 않도록 하였다.

이제 출력될 이미지의 크기를 결정하였으니 실제 이미지의 크기를 이에 맞추어 조정하도록 하자. 그러기 위해서 필자는 Image 클래스를 사용할 것이다. 다음의 코드는 특정 파일에서 새로운 Image 클래스의 인스턴스를 생성하는 구문이다.

Image myImage = Image.FromFile(이미지 파일의 물리적 경로);

Image 클래스의 인스턴스를 생성하면 우리는 Height, Width 속성을 사용하여 이미지의 너비와 높이를 구할 수 있다. 아래의 코드는 저번장에서 보았던 코드에 Image 클래스를 사용하여 너비와 높이를 조정하는 코드를 추가한 코드이다.

##########5*
##########6*

위의 코드를 보면 각각의 이미지의 너비와 높이를 구하고 한계치인 200 픽셀을 넘는지 검사한다. 200 픽셀보다 작다면 실제 이미지 크기 그대로 보여준다. 만약 200 픽셀을 넘는다면 실제 너비, 높이 값과 한계치 너비, 높이 값의 차이(델타값)를 구한다. 이 값은 이미지를 얼마나 조정해야 되는지를 결정하는 값이다.

예를 들어 너비 500 픽셀, 높이 300 픽셀짜리의 이미지가 있다고 하자. 그렇다면 너비의 델타값은 300 픽셀이 나오고 높이의 델타값은 100 픽셀이 된다. 너비의 델타값이 높이의 델타값보다 크기 때문에 한계 너비값을 이미지의 너비값으로 나눈값(200/500)을 사용하여 너비를 조정하게 되면 200 픽셀에 맞추어지게 된다. 이미지의 높이 값도 동시에 조정이 된다. 따라서 이 이미지는 조정후 너비 200 픽셀에 높이 120 픽셀의 값을 가진다. 다음은 실행한 결과이다.

##########7*

이번장에서는 동적으로 이미지의 크기를 조정하는 것에 대해서 알아보았다. 하지만 이번에 다룬 내용을 사용하면 이미지의 크기는 온전한 크기를 가지게 되어 그 크기를 다 다운을 받아야 된다. 다음장에서는 실제 이미의 크기까지 조정하는 것에 대해서 보도록 하겠다.



제공 : 코리아인터넷닷컴, a 2003년 02월 27일

ASP.NET에서 크기 조정된 이미지 출력하기(3) (3) : Image 클래스의 GetThumbnailImage 메서드

##########8*

저번 장에서 우리는 어떻게 폴더안의 이미지를 리스트로 불려들여서 크기를 조정하는지 보았다. 저번장 마지막에서 잠깐 언급했지만 저번장의 방식은 실제 이미지의 크기를 조정하는 것이 아니었다. 단지 img 태그를 사용하여 조정할 뿐이다. 예로 가로세로 400 픽셀짜리의 100kb 크기의 이미지가 있다면 저번장의 방식으로는 다음과 같이 줄이게 된다.

<img src="BigFile.gif" width="200" height="200"/>

그러면 브라우져에서는 가로 세로 200 픽셀로 보여지게 되지만 실제 파일의 크기는 그대로이다. 이것은 100kb 이미지 파일을 그대로 웹서버에서 다운을 받아서 브라우져에서 크기를 조정한다는 것이다. 실제 200 픽셀짜리 이미지라면 100kb 보다는 작을 것이다. 기사에서는 Image.GetThumbnailImage() 메서드를 사용하여 실제적으로 이미지 크기를 조정하는 것에 대해서 것이다.

페이지에 이미지 출력

이번에는 이미지의 경로를 담은 쿼리스트링을 통해서 ASP.NET 웹페이지에 이미지를 보여주는 방식을 사용할 것이다. 여러분이 웹서버에 있는 /images/SomeImage.jpg 라는 이미지를 ShowImage.aspx 페이지에서 호출한다고 하면 다음과 같이 태그를 작성한다.

<img src="ShowImage.aspx?img=/images/SomeImage.jpg"/>

이러한 방식을 사용하기 위해 System.Drawing 네임스페이스의 Image 클래스를 사용할 것이다. 클래스에는 save() 메서드가 있는데 이미지를 저장할 스트림, 이미지의 포맷 두가지 인자를 가진다. 다행히도 Response 개체는 OutputStream 속성을 가지고 있다.

다음의 코드를 보도록 하자.

<%@Import Namespace="System.Drawing.Imaging" %>

<script language="VB" runat="server">

  Sub Page_Load(sender as Object, e as EventArgs)

 

    '섬네일 이미지를 만들기 위한 이미지 이름을 얻는다.

    Dim imageUrl as String = Request.QueryString("img")

   

    '이미지 경로에는 /,\ 문자가 있으면 안된다.

    If imageUrl.IndexOf("/") >= 0 Or imageUrl.IndexOf("\") >= 0 then

      '/,\ 문자를 찾았을 경우

      Response.End()

    End If

   

    '이미지를 경로를 추가

    imageUrl = "/images/" & imageUrl

   

    '이미지를 얻는다.   

    Dim fullSizeImg as System.Drawing.Image

    fullSizeImg = System.Drawing.Image.FromFile(Server.MapPath(imageUrl))

   

    '이미지의 ContentType "image/gif"로하고 출력한다.

    Response.ContentType = "image/gif"

    fullSizeImg.Save(Response.OutputStream, ImageFormat.Gif) 

  End Sub

</script>

여기서 보아야 것은 Image 클래스를 사용하는 부분이다. 그전에 Page_Load 이벤트 핸들러부터 보도록 하자. 먼저 쿼리스트링을 읽어들여서 이미지 경로를 저장한다. 그리고 경로에는 어떠한 "/", "\" 문자도 있지 않도록 한다. 문자를 검사한 Image 클래스를 생성하여 이미지 경로의 이미지를 지정하고 이를 "image/gif" 형식으로 웹페이지에 보여주게 한다.

GetThumbnailImage 메서드 사용

Image 클래스는 동적으로 이미지를 조정하여 즉시 그려내는 GetThumbnailImage() 메서드를 가지고 있다. 이것은 여러분이 100kb 짜리 가로 세로 400 픽셀 이미지를 GetThumbnailImage 메서드를 사용하여 가로 세로 50 픽셀짜리 만든다면 크기는 아마도 25kb 정도가 될것이다.

GetThumbnailImage 메서드는 Image 클래스에 포함되어 있다. Image 클래스의 인스턴스에서 메서드를 호출할때 이미지는 지정한 크기로 축소되며 축소된 이미지의 다른 Image 인스턴스가 반환된다. GetThumbnailImage 메서드는 다음과 같은 형태를 가지고 있다.

Public Function GetThumbnailImage( _

   ByVal thumbWidth As Integer, _

   ByVal thumbHeight As Integer, _

   ByVal callback As Image.GetThumbnailImageAbort, _

   ByVal callbackData As IntPtr _

) As Image

thumbWidth thumbHeight 축소된 이미지의 가로 세로 크기를 말한다. 세번째 파라미터는 델리게이트를 필요로 하며 델리게이트는 메서드를 참조하는 참조 타입이다. 여러분이 C C++ 알고 있다면 펑션 포인터랑 비슷하다는 것을 있다. 델리게이트를 작성하려면 여러분은 다음과 같은 코드를 ASP.NET 웹페이지에 넣어야 한다.

Public Function FunctionName as Boolean

  Return False

End Function

그리고나서 GetThumbnailImage 메서드를 호출할 함수나 서브루틴에 다음의 코드를 추가하여야 한다.

Dim dummyCallBack as System.Drawing.Image.GetThumbNailImageAbort

dummyCallBack = New _

      System.Drawing.Image.GetThumbnailImageAbort(AddressOf FunctionName)

GetThumbnailImage 메서드의 마지막 파라미터인 callbackdata 반드시 IntPtr.Zero 값을 넘겨야 한다. 아래의 코드는 GetThumbnailImage 메서드를 사용하는 간단한 예제이다.

Function ThumbnailCallback() as Boolean

  Return False

End Function

 

Sub Page_Load(sender as Object, e as EventArgs)

  'Create the delegate

  Dim dummyCallBack as System.Drawing.Image.GetThumbNailImageAbort

  dummyCallBack = New _

    System.Drawing.Image.GetThumbnailImageAbort(AddressOf ThumbnailCallback)

     

  Dim fullSizeImg as System.Drawing.Image

  fullSizeImg = System.Drawing.Image.FromFile("C:\Images\someImage.gif")

 

  Dim thumbNailImg as System.Drawing.Image

  thumbNailImg = fullSizeImg.GetThumbnailImage(100, 100, _

                                         dummyCallBack, IntPtr.Zero)

 

  ...

End Sub

위의 코드는 Image 클래스의 인스턴스를 생성하고 GetThumbnailImage 메서드를 사용 이미지를 가로 세로 100 픽셀로 줄이는 예이다. 이제 어떻게 섬네일 이미지를 생성하는지 다음장에서 보도록 하자.



제공 : 코리아인터넷닷컴, a 2003 02 28

 

ASP.NET에서 크기 조정된 이미지 출력하기(4) (4) : Thumbnail 이미지 생성

##########9*

저번장에서 우리는 GetThumbnailImage 메서드에 대해서 알아보았다. 이번장에서는 실제 이미지를 축소하여 보여주는 코드를 보도록 하겠다. ShowImage.aspx 페이지에서 이미지를 보여주는데 이 이미지는 ShowThumbnail.aspx 페이지에서 처리되어서 보여지게 된다.

ShowThumbnail.aspx

먼저 이미지를 축소하는 ShowThumbnail.aspx 페이지부터 보도록 하겠다. 필자는 새로운 ASP.NET 웹 프로젝트를 VB.NET 용으로 생성하였다. 그리고 시작 페이지는 ShowImage.aspx 페이지이고 새로운 웹 페이지를 추가하여 이름을 ShowThumbnail.aspx로 하였다. ShowThumbnail.aspx 페이지는 이미지를 축소시켜서 출력시키는 일만 하면되기 때문에 디자인에 추가될 것은 없다. 코드를 보도록 하자.

##########10*

먼저 System.Drawing.Imaging 네임스페이스를 추가한다.

##########11*

델리게이트를 위한 함수를 생성한다.

##########12*

쿼리스트링으로 받아온 h와 w 값을 imageHeight와 imageWidth로 한다음 받아온 이미지 경로에 "/", "\" 문자가 있는지 검사를 한다. 그 아래의 IF문은 가로, 세로값이 명시되어있는지 아닌지에 대한 검사이다. 있다면(줄여야 한다면) GetThumbnailImage 메서드를 호출하여 이미지를 조정하게 된다. 줄일 필요가 없다면 원래 크기 그대로 이미지를 출력한다.

ShowImage.aspx

이제 이미지의 목록을 보여주는 ShowImage.aspx 페이지를 보도록 하자. 첫번째 장에서 우리는 이미지의 목록을 어떻게 보여주는지에 대해서 보았다. 이 페이지도 동일한 방법을 사용하고 있다. 다만 img 태그에서 직접 이미지를 호출하는 대신에 이번 방식에서는 ShowThumbnail.aspx로 이미지 경로를 보내서 조정된 이미지를 출력하게 된다.

##########13*

HTML 섹션이다. 저번장과 동일하게 데이터리스트 컨트롤을 사용한다.

##########14*

Directory, File 클래스를 사용하기 위해서 System.IO 네임스페이스를 참조한다.

##########15*

이미지가 축소되어야할 크기를 정하는 코드로 이 부분은 두번째 장에서 이미 다루었기 때문에 넘어가기로 하겠다.

##########16*

바뀌어진 부분은 이곳이다. img 태그에서 직접 이미지를 호출하던 것을 이미지의 이름을 ShowThumbnail.aspx에 쿼리스트링으로 첨부하여 보내게 된다. 그러면 ShowThumbnail.aspx에서는 이미지의 크기를 조정하여 출력하게 된다.

##########17*

컴파일을 하고 실행한 화면이다. 오른쪽에서 가운데 있는 이미지의 크기를 보았다. 15396 바이트로 되어있다.

##########18*

이미지를 클릭하여 실제 크기의 이미지를 본 화면이다. 크기는 30321 바이트로 되어있다.

지금까지 우리는 어떻게 동적으로 이미지의 크기를 조정하는지에 대해서 알아보았다. 첫번째, 두번째 장에서는 img 태그를 사용하여 이미지의 크기를 브라우져에서 조정하도록 하는 것에 대해서 보았고 세번째, 네번째 장에서는 Image 클래스의 GetThumbnailImage 메서드를 사용하여 실제 이미지의 크기를 조정하여 출력하도록 하였다.



제공 : 코리아인터넷닷컴, a 2003년 03월 03일