이미지 특수 효과 : BasicImage 필터

by 라제폰 2008. 12. 9. 09:14

인터넷 익스플로러 5.5 이상을 사용하고 있다면 BasicImage 객체의 필터 기법 사용법을 익혀두는 것이 좋다. 몇 가지 속성 사용만으로도 훌륭한 이미지 프로세싱이 가능하기 때문이다.

BasicImage 필터를 사용하는 가장 간단한 방법은 다음과 같다:

HTML	<ELEMENT STYLE= "filter:progid:DXImageTransform.Microsoft.BasicImage(sProperties)" ... >
스크립트	object.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(sProperties)"

결과부터 살펴 보도록 하자.

아래 "소스실행하기" 버튼을 클릭한 후 여러 옵션 상자들을 조절하여 BasciImage 필터 효과들을 살펴 보기 바란다.

<HTML> <HEAD> <STYLE> body{ margin:0; background:white; font-family:굴림; font-size:80%; } .bar{ background:navy; width:100%; height:25px; border-top:1px solid #99CCFF; border-bottom:1px solid #000000; } PRE { margin:0} </STYLE> </HEAD> <BODY STYLE="font-family:굴림; font-size:9pt"> <DIV CLASS="bar" STYLE="font-size:12pt; color:white;"> BasicImage 필터 사용법 </DIV> <DIV STYLE="position:absolute; top:45; left:270; width:500"> 아래 옵션 상자들을 조절하여 각 필터들의 효과를 살펴보기 바란다<BR/> 이 값을 조정하면 아래 소스 코드에도 그 결과가 반영이 된다.<BR/><BR/><BR/> <B>Rotation:</B> <SELECT onchange="oRotation.innerText=this.options[this.selectedIndex].value; filterDIV.filters.item(1).rotation=this.options[this.selectedIndex].value"> <OPTION VALUE="0">0</OPTION> <OPTION VALUE="1">1</OPTION> <OPTION VALUE="2">2</OPTION> <OPTION VALUE="3">3</OPTION> </SELECT> <B>Opacity:</B> <SELECT onchange="oOpacity.innerText=this.options[this.selectedIndex].value; filterDIV.filters.item(1).opacity=this.options[this.selectedIndex].value"> <OPTION VALUE="0.05">.05</OPTION> <OPTION VALUE="0.15">.15</OPTION> <OPTION VALUE="0.25">.25</OPTION> <OPTION VALUE="0.35">.35</OPTION> <OPTION VALUE="0.35">.45</OPTION> <OPTION VALUE="0.55">.55</OPTION> <OPTION VALUE="0.65">.65</OPTION> <OPTION VALUE="0.75">.75</OPTION> <OPTION VALUE="0.85">.85</OPTION> <OPTION VALUE="0.95">.95</OPTION> <OPTION SELECTED VALUE="1">1</OPTION> </SELECT><BR/><BR/> <B>Grayscale:</B> <SELECT onchange="oGrayScale.innerText=this.options[this.selectedIndex].value; filterDIV.filters.item(1).grayscale=this.options[this.selectedIndex].value"> <OPTION VALUE="0">0</OPTION> <OPTION VALUE="1">1</OPTION> </SELECT> <B>X-ray:</B> <SELECT onchange="oXray.innerText=this.options[this.selectedIndex].value; filterDIV.filters.item(1).xray=this.options[this.selectedIndex].value"> <OPTION VALUE="0">0</OPTION> <OPTION VALUE="1">1</OPTION> </SELECT><BR/><BR/> <B>Mirror:</B> <SELECT onchange="oMirror.innerText=this.options[this.selectedIndex].value; filterDIV.filters.item(1).mirror=this.options[this.selectedIndex].value"> <OPTION VALUE="0">0</OPTION> <OPTION VALUE="1">1</OPTION> </SELECT> <B>Invert:</B> <SELECT onchange="oInvert.innerText=this.options[this.selectedIndex].value; filterDIV.filters.item(1).invert=this.options[this.selectedIndex].value"> <OPTION VALUE="0">0</OPTION> <OPTION VALUE="1">1</OPTION> </SELECT> <BR/><BR/><BR/><BR/>이 필터를 만들기 위한 코드는 다음과 같습니다:<BR/> </DIV> <DIV ID="filterDIV" STYLE="position:absolute; top:40; left:10; width:240; height: 180; background: gold; padding:5px; font-size:12pt; border:1px solid black; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='BLACK',endColorstr='gold'), progid:DXImageTransform.Microsoft.BasicImage(Rotation=0,Mirror=0,Invert=0,XRay=0,Grayscale=0,Opacity=1.00,Mask=0), ; color:white; text-align:center; font-weight:bold "> <IMG SRC="http://korea.internet.com/images/kiwi134.gif" STYLE="position:absolute; top:45; left:40"> BasicImage 필터 적용 </DIV> <DIV CLASS="bar" STYLE="position:relative; top:255; z-index:3;font-size:12pt; color:white;"> 아래 코드를 선택한 후 복사하세요! </DIV> <PRE ID="oCode" STYLE="position:relative; top:220; font-size:9pt; background:white; padding:10px; color:black;"> 〈DIV ID="oFilterDIV" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; padding:10px; font:bold 13pt verdana; background: yellowgreen; <SPAN STYLE="color:red; font-size:8pt; font-family:verdana; ">filter:progid:DXImageTransform.Microsoft.BasicImage(<BR/>grayscale=<SPAN ID="oGrayScale">0</SPAN>, xray=<SPAN ID="oXray">0</SPAN>, mirror=<SPAN ID="oMirror">0</SPAN>, invert=<SPAN ID="oInvert">0</SPAN>, opacity=<SPAN ID="oOpacity">1</SPAN>, rotation=<SPAN ID="oRotation">0</SPAN>)</SPAN>"〉 DIV 영역〈/DIV〉 </PRE> </DIV> </BODY> </HTML>

전체 소스 코드는 위의 TextArea에 들어 있다.

전체 코드의 흐름은 다음과 같다:

필터를 적용시킬 영역을 DIV 태그를 이용하여 filterDIV란 이름으로 정의한다.
이 영역에 적당한 이미지를 삽입한다.
SELECT 태그를 이용히여 각각의 옵션을 설정한다.
사용자가 옵션을 변경할 때 마다 filterDIV 영역에 필터를 적용시키고 다 이내믹하게 그와 관련된 소스 코드를 변경시킨다.

SELECT 태그에 들어 있는 ONCHANGE 이벤트에 대한 간단한 설명을 하자면,

예를 들어, Rotation에 들어 있는 SELECT 태그를 보면, <SELECT onchange="oRotation.innerText=this.options[this.selectedIndex].value; filterDIV.filters.item(1).rotation=this.options[this.selectedIndex].value">와 같은 코드가 들어 있다.
여기서 oRotation 객체는 <PRE ID=oCode>영역 안에 각 필터의 종류에 따라 <SPAN> 태그를 이용하여 정의해 놓은 객체명이다. 이 객체의 innerText 속성을 이용하여 해당 코드의 속성 값을 변경시킨다.
filterDIV 영역에 사용자가 변경한 필터 값을 적용시키기 위해 filterDIV.filters.item(1).rotation=this.options[this.selectedIndex].value를 사용한다.

여기서는 각 필터의 다양한 효과를 보여주기 위해 복잡하게 사용하였으나 아주 간단히 이미지에 opacity 값을 0.55로 하면서 90도 회전시킨 필터를 적용하려면 다음과 같이 하면 된다.