ColdFusion에서 이미지를 Resize하는 방법은 imageResize() 함수를 쓰게 되면 쉽게 가로사이즈를 변경할 수 있습니다. 물론 함수는 Adobe ColdFusion 8 또는 Railo 3이상의 환경에서 지원합니다. 그런데 이미지를 리사이징하다보면 가로가 더 길거나 세로가 더 긴 직사각형 이미지가 대부분입니다. 그리고, HTML이나 ColdFusion에서 사이즈를 줄 일 경우 대부분 Width값만 조절하면 Height값은 비율에 따라 자동으로 조절됩니다. 하지만 Design의 특성상 또는 Twitter에서의 Profile 사진처럼 정사각형으로 이미지를 보여야 하는 경우가 있습니다.
그런데 사용자가 업로드하는 이미지는 언제나 가로가 더 길던, 세로가 더 긴 직사각형 이미지이고, 업로드시 사용자가 Photoshop등에서 미리 정사각형으로 조절하여 업로드 할 수 있지만 매번 그러라고 할 수 도 없는 노릇입니다. 그리고 가로가 길던, 세로가 길던 정사각형으로 리사이즈 하는 경우 이미지의 비율을 찌그러뜨리지 않고(홀쭉이가 되거나 뚱댕이 되는 것이 아닌), 원본 비율대로 사이즈만 조절되어야만 한다면 어떻게 해야 할까요? LearnCF에서의 간단한 예제를 통해 가로세로 비율이 정사각형이 아닌 이미지를 어떻게 정사각형 이미지로 비율 맞추어 리사이즈하는지 알아 봅시다. 먼저 예제를 미리 보시길 바랍니다.
Demo View : http://www.nooree.com/samples/cfimage/square_thumnail.cfm
<cfimage>를 이용해서 특정 이미지의 정보를 읽어 온 다음, squareThumbnail()이라는 사용자 정의 함수(UDF)에 Arguments(여기서는 이미지정보와 리사이즈하고자 하는 목표 사이즈) 를 전달하면, 실행됩니다. 목표 사이즈값은 가로세로의 동일한 값이겠죠? 그리고 다음의 세가지 조건에 따라 프로세싱을 달리 합니다. 첫번째는 가로사이즈가 더 큰 이미지인 경우, 두번째는 세로사이즈가 더 큰 이미지인 경우, 마지막으로 정사각형이미지인 경우로 나누어 처리합니다. 모든 이미지의 정보에서 가로와 세로의 길의 절반값을 계산합니다. 가령 400px*300px 크기의 이미지라면 가로의 절반값은 200px이고, 세로의 경우 150px이 됩니다. 그렇다면 이 이미지의 중심점의 좌표는 X좌표는 200. Y좌표는 150이 됩니다.
그런다음 imageCrop()함수를 이용해서 이 중심좌표를 기준으로 원하는 목표 사이즈 만큼만 가로세로 잘라내면 되겠죠. imageCrop()함수의 기본 사용법은 ImageCrop(name, x, y, width, height) 이므로 X값과 Y값을 지정해 주고, width와 height는 목표 리사이즈 값이므로 동일한 값입니다. 다음의 코드를 보고 X, Y값을 구해보세요. 간단하게 imageResize()함수와 imageCrop()함수를 써서 정사각형 이미지 리사이즈를 구현해 보았습니다.
<cffunction name="squareThumbnail" access="private" returntype="void">
<!--- 함수로 넘어온 Argument정의 --->
<cfargument name="image" required="true" />
<cfargument name="size" required="true" />
<!--- 이미지의 사이즈의 절반을 구함. 전체 사이즈의 2분의 1--->
<cfset var half = int(arguments.size / 2) />
<!--- X, Y의 초기값 정의 --->
<cfset var fromX = 0 />
<cfset var fromY = 0 />
<!--- 세로가 더 긴 경우 --->
<cfif arguments.image.height gt arguments.image.width>
<cfset imageResize(arguments.image, arguments.size, '') />
<cfset fromX = arguments.image.Height / 2 - half />
<cfset imageCrop(arguments.image, 0, fromX, arguments.size, arguments.size) />
<!--- 가로가 더 긴 경우 --->
<cfelseif image.width gt image.height>
<cfset imageResize(arguments.image, '', arguments.size) />
<cfset fromY = arguments.image.Width / 2 - half />
<cfset imageCrop(arguments.image, fromY, 0, arguments.size, arguments.size) />
<cfelse>
<cfset imageResize(arguments.image, '', arguments.size)>
<cfset imageCrop(arguments.image, 0, 0, arguments.size, arguments.size)>
</cfif>
<!---정사각형으로 리사이즈된 이미지 출력--->
<cfimage action="writetobrowser" source="#arguments.image#" />
</cffunction>
<h2>김태희 - 정사각형 이미지 리사이즈</h2>
<!---이미지 정보를 읽어옴--->
<cfimage action="read" name="image" source="#expandPath('./kimtaehee.jpg')#" />
<!--- 읽어온 이미지를 화면상에 출력--->
<cfimage action="writetobrowser" source="#image#" />
<!--- squareThumbnail 사용자 함수에 이미지를 대입하여, 정사각형 이미지로 변환--->
<cfset squareThumbnail(image, 150) />
|
previous entries
Category :
ColdFusion
Comments :
댓글쓰기
Posted by
장창학 at 5:29 PM
ColdFusion (74)