개체의 내용을 픽셀들이 위치한 사각형부분의 색상의 평균 색상으로 모두 변환하여 표현한다.

Script object.style.filter='progid:DXImageTransform.Microsoft.(propVal)'
HTML <ELEMENT style="filter:progid:DXImageTransform.Microsoft.(propVal)">
Pixelate 필터 예제(클릭)
인수
propVal : (속성 문자열)
필터가 가질 수 있는 한개 이상의 속성들로 속성=값들을 컴마(,)로 연결, 구성된 문자열이다.

애트리뷰트 속성 설명
duration Duration 변환이 완성되는 시간의 길이를 밀리초 단위로 반환하거나 설정한다.
enabled Enabled 필터가 작용할 수 있게 할 것인가를 반환하거나 설정한다. true: 사용가능, false:사용 불가능
maxSquare MaxSquare 한 사각형의 최대 너비를 픽셀 단위로 반환하거나 설정한다.
  Percent 정지된 필터 출력을 캡쳐할 완성도 백분율 포인트를 반환하거나 설정한다.
  status 변환의 상태를 반환한다.

메서드 status 설명
apply 1 변환을 위해 원본 개체의 내용을 캡쳐(capture)한다.
play 2 변환하며 디스플레이 한다.
stop 0 변환의 반복을 중지한다.
특기

Enabled 속성을 true로 설정하면 Pixelate 변환은 복합 시각효과를 준다. 과정에서 이미지의 선명도가 감소하였다가 다시 원래 상태로 증가한다.

변환의 처음 반은 내용이 확장된 픽셀 사각형으로 변환되어 표현된다. 한개의 픽셀로 구성된 사각형에서부터 MaxSquare에 도달할 떄까지 사각형이 확대되며 변환되어 표현된다.

나머지 반은 그 반대로 점점 사각형이 한 픽셀까지 작아지면서 변횐되어 표현된다. 이 과정에서 점차적으로 원본 이미지에 가깝게 접근된다.

Enabled 속성을 false로 설정하면 Pixelate 변환이 중지되고, 당초의 이미지로 고정된 이미지가 표현된다.

적용style
A, ACRONYM, ADDRESS, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, FRAMESET, hn, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, MARQUEE, MENU, NOBR, OL, OBJECT, P, plainText, PRE, Q, RT, RUBY, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TD, TEXTAREA, TH, TT, U, UL, VAR, XMP


DIV에서 필터 속성 예제


Pixelate 필터 예제
필터 표시창
<SCRIPT>
var clickBut=false;
function doPlay(){
  divObj.filters[0].Apply();
  if (clickBut){
    clickBut=false;
    divObj.style.visibility='visible';
  } else {
    clickBut=true;
    divObj.style.visibility='hidden';
  }
  divObj.filters[0].Play();
  str='divObj.style.filter='+divObj.style.filter+'<BR>';
  str+='⇒Enabled=('+divObj.filters[0].Enabled+'), ';
  str+='MaxSquare=('+divObj.filters.item(0).MaxSquare+'), ';
  str+='Duration=('+divObj.filters.item(0).Duration+')<BR>';
  show1.innerHTML=str;
}
</SCRIPT>
<DIV id="divObj"
 style="width:600;height:100;background-color:pink;padding=5;font-size:40;line-height:1.2em;color:blue;font-weight:bold;
  filter:progid:DXImageTransform.Microsoft.Pixelate( duration=3,enabled=false);">
<IMG src=../../gif/rfexample.gif width=100><BR>
Pixelate 필터 예제
</DIV>
<BUTTON onclick="doPlay()" style="width:600">필터 효과를 위해 클릭해 보라</BUTTON>
<DIV id=show1 style="width:600;height:50;border:solid 1 blue;padding:3;font-size:80%">필터 표시창</DIV>