JS :: 인터넷 익스플로러 이미지 필터

인터넷 익스플로러는 이미지를 처리하는 필터를 제공합니다. 포토샵의 필터와 비슷한 기능을 제공하는 필터는 익스플로러 5.5이상에서만 지원됩니다. 또한 익스플로러의 이미지필터는 다른 웹브라우저에서는 볼 수 없으므로 사용시에는 이에 주의하여야 합니다.

FIlter객체.filter.필터종류.속성
style="filters.필터의 종류(속성)"

Alpha Filter

Alpha필터는 불투명도를 조절하여 흐리하게, 선명하게 효과등을 줄 수 있습니다.

|형식|  
객체명.style.filter="progid:DXImageTransform.Microsoft.Alpha(속성)"

|HTML형식|
<태그명 style="filter:progid:DXImageTransform.Microsoft.Alpha(속성)">

|예제|
<IMG SRC="img1.jpg" STYLE="filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=0,Style=2,StartX=0, FinishX=100, StartY=0, FinishY=100)">

Alpha필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Enabled : 필터가 적용되었는지 여부를 설정합니다.
• FinishOpacity : 필터에 적용된 그라디언트 끝부분의 불투명도를 설정합니다.
• FinishX : 필터에 적용된 그라디언트 끝부분의 x좌표를 설정합니다.
• FinishY : 필터에 적용된 그라디언트 끝부분의 y좌표를 설정합니다.
• Opacity : 불투명도 값을 설정합니다.
• StartX : 그라디언트 효과가 시작되는 지점의 X좌표를 설정합니다.
• StartY : 그라디언트 효과가 시작되는 지점의 Y좌표를 설정합니다.
• Style : 그라디언트 효과의 형태를 설정합니다.
  • 0 : Uniform
  • 1 : Linear
  • 2 : Radial
  • 3 : Rectangular

BasicImage Filter

객체의 회전, 불투명도, 뒤집기, 흑백전환등의 효과를 주는 필터입니다.

|형식|
객체명.style.filter="progid.DXImageTransform.Microsoft.BasicImage(속성)"

|HTML형식|
<태그명 style="filter:progid:DXImageTransform.Microsoft.BasicImage(속성)">

|예제|
<IMG SRC="img2.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.BasicImage (grayscale=0, xray=0, mirror=1, invert=1, opacity=0.4, rotation=1)">

BasicImage필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Enabled : 필터의 동작여부를 설정합니다.
• GrayScale : 객체를 그레이스케일로 보여줍니다.
• Invert : RGB색상을 뒤집어 보여줍니다.
• Mask : 객체의 투명한 부분의 마스크값을 설정합니다.
• MaskColor : 객체의 투명마스크 색상을 설정합니다.
• Mirror : 거울에 반사된 모양으로 객체를 설정합니다.
• Opacity : 객체의 불투명도를 설정합니다.
• Rotation : 객체를 회전시켜 줍니다.
  • 1 : 90도
  • 2 : 180도
  • 3 : 270도
• Xray : 객체에 X-레이효고를 줍니다. 색상은 객체에 사용된 RGB의 평균값입니다.

BlendTrans Filter

BlendTrans필터는 페이드(fade)효과를 줍니다.

|형식|
객체명.style.filter="DXImageTransform.Microsoft.BlendTrans(속성)"

|HTML형식|
<태그명 style="filter:DXImageTransform.Microsoft.BlendTrans(속성)">

|예제|
<IMG SRC="img1.jpg" STYLE="width:100%;filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=320) progid:DXImageTransform.Microsoft.Wheel(duration=2);">

BlendTrans필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Duration : 전환효과가 완료될 시간을 설정합니다.
• Enabled : 필터작동여부를 설정합니다.
• Percent : 고정필터 결과 디스플레이의 캡쳐지점을 설정합니다.
• Status : 전환형태를 설정합니다.

Blur Filter

Blur필터는 번짐효과를 주는 필터입니다.

|형식|
객체명.style.filter="progid:DXImageTransform.Microsoft.Blur(속성)"

|HTML형식|
<태그명 style="filter:progid:DXImageTransform.Microsoft.Blur(속성)">

|예제|
<img src="img1.jpg"border="0" style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='2', MakeShadow='False', ShadowOpacity='0.5')">

Blur필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Enabled : 필터적용여부를 설정합니다.
• MakeShadow : 그림자 형태로 보여질지 여부를 true나 false로 설정합니다.
• PixelRadius : 픽셀단위로 번짐값을 설정합니다.
• ShadowOpacity : 그림자의 불투명도를 설정합니다.

Chroma Filter

객체의 특정색상을 투명하게 만들어 줍니다.

|형식|
객체명.style.filter="progid.DXImageTransform.Microsoft.Chroma(속성)"

|HTML형식|
<태그명 style="filter.progid:DXImageTransform.Microsoft.Chroma(속성)">

|예제|
<IMG SRC="img1.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.Chroma(Color='#CA8C41')">

Chroma필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Enabled : 필터작동여부를 설정합니다.
• Color : 필터를 적용할 (투명하게 만들)색상을 설정합니다.

DropShadow Filter

그림자효과를 줍니다.

|형식|
객체명.style.filter="progid:DXImageTransform.Microsoft.DropShadow(속성)"

|HTML형식|
<태그명 style="filter:progid:DXImageTransform.Microsoft.DropShadow(속성)">

|예제|
<IMG SRC="img1.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.Emboss()">

DropShadow필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Color : 그림자의 색상을 설정합니다.
• Enabled : 필터 동작여부를 설정합니다.
• OffX : 그림자의 x축 간격을 설정합니다.
• OffY : 그림자의 y축 간격을 설정합니다.
• Positive : 불투명한 부분에서도 그림자를 만들어 줄지 여부를 true나 false로 설정합니다.

Emboss Filter

객체에 올록볼록한 효과를 그레이스케일로 보여줍니다.

|형식|
객체명.style.filter="progid:DXImageTransform.Microsoft.Emboss(속성)"

|HTML형식|
<태그명 style="filter:progid:DXImageTransform.Microsoft.Emboss(속성)">

|예제|
<IMG SRC="img1.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.Emboss()">

Emboss필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Bias : 필터가 적용될 객체의 색상요소에 백분율을 추가합니다.
• Enabled : 필터동작여부를 설정합니다.

Engrave Filter

객체에 흑백모드의 조각효과를 보여줍니다.

|형식|
객체명.style.filter="progid:DXImageTransform.Microsoft.Engrave(속성)"

|HTML형식|
<태그명 style="filter:progid:DXImageTransform.Microsoft.Engrave(속성)">

|예제|
<IMG SRC="img2.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.Engrave()">

Engrave필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Enabled : 필터동작여부를 설정합니다.
• Bias : 필터가 적용될 객체의 색상요소를 백분율에 추가

FlipH Filter

객체를 좌우로 뒤집는 효과를 보여줍니다.

|형식|
객체명.style.filter="FlipH()"

|HTML형식|
<태그명 style="filter:FlipH()">

FlipH필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Enabled : 필터동작여부를 설정합니다.

FlipV Filter

객체를 상하로 뒤집는 효과를 보여줍니다.

|형식|
객체명.style.filter="FlipV()"

|HTML형식|
<태그 style="filter:FlipV()">

|예제|
<IMG SRC="img1.jpg" BORDER="0" STYLE="filter:FlipV()">

FlipV필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Enabled : 필터의 동작여부를 설정합니다.

Glow Filter

객체의 외곽에 빛을 만들어 glow필터효과를 나타냅니다.

|형식|
객체명.style.filter="progid:DXImageTransform.Microsoft.Glow(속성)"

|HTML형식|
<태그명 style="filter:progid:DXImageTransform.Microsoft.Glow(속성)">

|예제|
<IMG SRC="img1.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='10')">

Glow필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Color : 빛의 색상값을 설정합니다.
• Enabled : 필터동작여부를 설정합니다.
• Strength : 빛의 크기를 픽셀값으로 설정합니다.

MaskFilter Filter

객체의 특정부분에 칼라마스크효과를 주어, 특정색상을 투명하게 만들어 줍니다.

|형식|
객체명.style.filter="progid:DXImageTransform.Microsoft.MaskFilter(속성)"

|HTML형식|
<태그명 style="filter:progid:DXImageTransform.Microsoft.MaskFilter(속성)">

|예제|
<DIV  STYLE="filter:progid:DXImageTransform.Microsoft.MaskFilter(color=blue); height:400px; width: 300px;">

MaskFilter필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Color : 필터가 적용될 색상을 설정합니다.
• Enabled : 필터동작여부를 설정합니다.

Wave Filter

객체에 파도가 피는 듯한 굴곡효과를 줍니다.

|형식|
객체명.style.filter="progid:DXImageTransform.Microsoft.Wave(속성)"

|HTML형식|
<태그명 style="filter:progid:DXImageTransform.Microsoft.Wave(속성)">

|예제|
<IMG SRC="img2.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.Wave(Add='true', LightStrength=120, Phase=0, Strength=6, Freq=6)">

Wave필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Add : 원본이미지와 필터이미를 겹쳐 쑬 것인지 여부를 설정합니다.
• Enabled : 필터 동작여부를 설정합니다.
• Freq : 웨이브필터에 의해 생성된 파도의 수를 설정합니다.
• LightStrength : 빛의 강도를 설정합니다.
• Phase : 필터가 시작되는 지점을 설정합니다.
• Strength : 빛의 거리를 픽셀값으로 설정합니다.

Shadow Filter

객체의 회전, 불투명도, 뒤집기, 흑백전환등의 효과를 주는 필터입니다.

|형식|
객체명.style.filter="progid:DXImageTransform.Microsoft.Shadow(속성)"

|HTML형식|
<태그명 style="filter:progid:DXImageTransform.Microsoft.Shadow(속성)">

|예제|
<IMG SRC="img2.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.Shadow(color='#0033ff', Direction=150, Strength=22)">

Shadow필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Color : 그림자의 색상을 설정합니다.
• Direction : 그림자의 각도를 설정합니다.
• Strength : 그림자의 크기를 설정합니다.
• Enabled : 필터 동작 유무를 설정합니다.

Gray Filter

객체에 그레이스케일 효과를 주는 필터입니다.

|형식|
객체명.style.filter="progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"

|HTML형식|
<태그명 style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)">

|예제|
<IMG SRC="img2.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)">

Gray필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Enabled : 필터의 작동여부를 설정합니다.

Light Filter

객체에 채도, 밝기, 광원효과를 주는 필터입니다.

|형식|
객체명.style.filter="progid:DXImageTransform.Microsoft.Light(sProperties)"

|HTML형식|
<태그명 style="filter:progid:DXImageTransform.Microsoft.Light(sProperties)">

Light필터에서 사용할 수 있는 속성은 다음과 같습니다.

• Enabled : 필터의 적용여부를 설정합니다.

AddCone메서드

객체명.filters.item("DXImageTransform.Microsoft.Light").addCone(iX1, iY1, iZ1, iX2, iY2, iRed, iGreen, iBlue, iStrength, iSpread)

• iBlue : 채도의 파란(Blue)성분값, 0에서 255까지 값을 설정합니다.
• iGreen : 채도의 녹색(Green)성분값. 0에서 255까지 값을 설정합니다.
• iRed : 채도의 빨간(Red)성분값. 0에서 255까지 값을 설정합니다.
• iSpread : 객체표면과 광원의 수직위치간 각도를 0에서 90사이의 값으로 설정합니다.
• iStrength : 필터의 강도를 0에서 100까지의 값으로 설정합니다.
• iX1 : 광원의 왼쪽좌표를 설정합니다.
• iX2 : 목표광원의 왼쪽좌표를 설정합니다.
• iY1 : 광원의 위쪽좌표를 설정합니다.
• iY2 : 목표광원의 위쪽좌표를 설정합니다.
• iZ1 : 광원의 Z축레벨을 설정합니다.

<HTML>
<STYLE type="text/css">
.LightFilter {
          background-color: white;
          filter: light();
          width: 100px;
          }
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
function Light_Init() {
    var iX2 = LightDiv1.offsetWidth;
    var iY2 = LightDiv1.offsetHeight;
    LightDiv1.filters[0].addCone(0,0,1,iX2,iY2,0,255,0,20,180);
}
//-->
</SCRIPT>
<BODY onload="Light_Init()">

<TABLE BORDER=0>
    <TR>
        <TD> <IMG SRC="img1.jpg"> </TD>
        <TD> <DIV CLASS="LightFilter" ID="LightDiv1">
             <IMG SRC="img1.jpg">
             </DIV>
        </TD>
    </TR>
    <TR>
        <TD ALIGN="center"> 원본이미지  </TD>
        <TD ALIGN="center"> Light 필터 효과를 준 이미지 </TD>
    </TR>
</TABLE>

</BODY>
</HTML>