ACTIVE SERVER PAGE

컴포넌트를 설치하였으면, 본격적인 코딩에 들어가 보도록 하겠습니다.

이 페이지에서 테스트할 부분은 실제 이미지가 서버에 있을 경우, 이미지를 화면에 뿌릴때
싸이즈를 원하는 크기로 조절해서 뿌리는 방법을 해 보도록 하겠습니다.

일단 필요한 파일을 보도록 하겠습니다.

1. view.asp ( 이미지를 뿌릴 페이지 )
2. Thumbnail.asp ( 이미지 사이즈를 조절하는 페이지)
3. test.jpg      ( 테스트용 이미지 입니다.)

이렇게 세개의 이미지가 필요 합니다.

일단 test.jpg 의 이미지가 500 * 500 싸이즈라고 가정을 했을때,

<img src="test.jpg" width=500 height=500>

와 같은 태그를 이용해서 뿌려줄수 있습니다. 보통의 경우에는요.

사이즈를 조절하고 싶을경우
<img src="test.jpg" width=100 height=100>

와 같이 뿌려 줄수 있을겁니다.

그러나, 만약에 위와 같이 뿌려줄 경우, 마우스 오른쪽 버튼을 눌러 이미지를 다운을 받는다면,

어차피 두경우 모두 500 * 500 의 이미지를 다운받게 됩니다.

우리가 여기에서 섬네일을 사용하는 이유가 있습니다.

만약 여기에서 100 * 100 사이즈로 해서 다운을 받게 할려면, 즉, 원본 이미지의 다운을 막고 싶다면
어떻게 해야 할까요?????

이런 경우에 섬네일 컴포넌트를 사용할수 있습니다.

그럼, 여기에서 Thumbnail.asp 의 소스를 보도록 하겠습니다.
 

<%
	'-----------------------------------------
	'	파일명 Thumbnail.asp
	'-----------------------------------------
	Response.ContentType = "image/jpeg"

	Width = Int(Request("Width"))
	Height = Int(Request("Height"))
	
	VFilePath = Request("filepath")
	FilePath = Server.MapPath(VFilePath)

	Quality=100
	
  	Set objCxImage = Server.CreateObject("CxImageATL.CxImage")
  	Call objCxImage.Load(FilePath,GetFileType(FilePath))
  
  	widthOrig = CDbl(objCxImage.GetWidth())
  	heightOrig = CDbl(objCxImage.GetHeight())
  
  	fx = widthOrig/Width
  	fy = heightOrig/Height 

  	If fx>fy Then 
  		f=fx 
  	Else 
  		f=fy  
  	end if
  		
	If f<1 Then 
		f=1
	 	widthTh = Int(widthOrig/f)
	 	heightTh = Int(heightOrig/f)
  	Else
	 	widthTh = Width
	 	heightTh = Height
  	End If
  	
  	Call objCxImage.Resample(widthTh,heightTh,2)
  	BinData = objCxImage.ImageForASP(2,Quality)

	Response.BinaryWrite BinData

	Function GetFileType(sFile)
  		dot = InStrRev(sFile, ".")
  		filetype=2
  		If dot > 0 Then 
  			sExt = LCase(Mid(sFile, dot + 1, 3))
  		end if
  			
  		If sExt = "bmp" Then filetype = 0
  		If sExt = "gif" Then filetype = 1
  		If sExt = "jpg" Then filetype = 2
  		If sExt = "png" Then filetype = 3
  		If sExt = "ico" Then filetype = 4
  		If sExt = "tif" Then filetype = 5
  		If sExt = "tga" Then filetype = 6
  		If sExt = "pcx" Then filetype = 7
  		
  		GetFileType=filetype
	End Function

	%>

Thumbnail.asp 파일의 전체 소스 입니다.

위의 소스를 간락하게 설명을 드리면,
Response.ContentType = "image/jpeg"
파일의 타입을 이미지형으로 바꿉니다.
실제 asp 파일이지만, 위의 설정으로 서버는 이미지로 인식을 하게 됩니다.

Width = Int(Request("Width"))
Height = Int(Request("Height"))
VFilePath = Request("filepath")
FilePath = Server.MapPath(VFilePath)
Quality=100

위의 소스는 바꿀 이미지의 사이즈(width,height) 값을 받고, filepath 를 받게 됩니다.
Server.MapPath(VFilePath) 메소드를 통해 실제 서버의 경로를 (예: c:\wwwroot\....) 형태로
바꾸어 주겠지요?
Quality 변수는 변환후 이미지의 퀄리티를 나타냅니다.

Set objCxImage = Server.CreateObject("CxImageATL.CxImage")
Call objCxImage.Load(FilePath,GetFileType(FilePath))

  위의 소스는 CxImage 인스턴트를 만들어 줍니다.
  그리고, FilePath 의 이미지를 서버에서 읽어와 기억장치에 Load 를 하는 소스 입니다.
 
  GetFileType(FilePath) 이부분은 아래부분에 Function GetFileType() 함수를 통해 코드값으로
  바뀌게 됩니다. bmp 파일일 경우 0 , gif파일의 경우 1 ,,,, 등으로 바뀌게 됩니다.
 
widthOrig = CDbl(objCxImage.GetWidth())
heightOrig = CDbl(objCxImage.GetHeight())

  위의 소스는 GetWidth() , GetHeight() 메소드를 통해 원본이미지의 실제 사이즈를 구합니다.
 
  그리고, 특정로직을 통해 widthTh , heightTh 값을 구하게 됩니다.
 
  width=100 , height=100 이란 값을 받았을때, 이값을 곧바로 지정한다면, 이미지가 원본 이미지와
  상관없이 무조건 100 * 100 싸이즈로 바뀌기 때문에 이미지가 깨어질수 있습니다.
 
  위의 로직을 통해 width , height 값을 비율적으로 줄여줄수 있습니다.
 
Call objCxImage.Resample(widthTh,heightTh,2)
BinData = objCxImage.ImageForASP(2,Quality) 

  위의 소스는 ReSample 메소드를 이용해서 이미지의 사이즈를 메모리상에서 줄여주게 됩니다.
  ImageForASP 메소드는 메모리에 있는 이미지 데이타 값을 BinData 변수에 넣어줍니다.

  Response.BinaryWrite BinData

  끝으로 Response 객체의 BinaryWrite 프로퍼티를 이용해서 BinData 를 출력해 줍니다.
 
  현재 ContentType 을 image/jpeg 형으로 처음에 설정했기 때문에 값을 뿌리면, 메모리에 있는
  이미지 데이터의 값이 클라이언트에게 뿌려주게 됩니다.
 
'-------------------------------
' 파일명 : View.asp
'-------------------------------
<img src="Thumbnail.asp?filepath=/test.jpg&width=100&height=100">
 
  위의 소스는 View.asp 파일의 소스 입니다.
 
  <img ... > 태그를 이용해서 이미지를 뿌립니다. 그러나, 이미지명을 쓰는게 아니라,
  지금껏 작성한 Thumbnail.asp 파일을 뿌려줍니다. 넘겨주는 값을 filepath , width , height
  값을 보내면 화면에는 실제로 적용된 100 * 100 의 이미지가 뿌려집니다.
 
  마우스 오른쪽 버튼을 눌러 이미지를 다운 받아 보십시오.
  실제로 다운되는 이미지는 100 * 100 이미지를 다운 받아지는 것을 확인하실수 있을겁니다.
 
  즐거운 시간 되십시오...