[jvs] matrix 를 이용한 이미지 회전시키기

웹상에서 이미지를 보다보면, 간혹 좌나 우측으로 애초에 기울어진 사진들을 볼 수 있다.

사용자가 애초에 돌려서 올리면 상관없는데, 일부 사용자의 경우, 사진방향을 돌리는 방법을 잘 모르기 때문에,

아래와 같이 스크립트를 이용하여 사진의 방향을 돌릴 수 있게 해준다.

소스 내용을 보니, 익스플로러 계열에서만 동작될 듯 하다.

기존의 소스를 수정하여, 간단한 기능을 수행하게 변경함.

<table border="0" width="10" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10" align="center">
<input type="button" id="turnleft" name="turnleft" value="좌로회전" omclick="javascript:rotatleft();" style="border:1 solid #FFFFFF;height:14;font-size:8pt;">
&nbsp;
<input type="button" id="turnnor" name="turnnor" value="원래대로" omclick="javascript:rotatnormal();" style="border:1 solid #FFFFFF;height:14;font-size:8pt;">
&nbsp;
<input type="button" id="turnright" name="turnright" value="우로회전" omclick="javascript:rotatright();" style="border:1 solid #FFFFFF;height:14;font-size:8pt;">
</td>
</tr>
<tr>
<td width="100%" style="padding:2;" align="center">
<img id="img" name="img" src="이미지주소" border="0" align="absmiddle">
</td>
</tr>
</table>

<SCRIPT LANGUAGE="JavaScript">
function rotate(name, angle){
//convert angle into radians
var rad = degToRad(angle);
//calculate cos and sin of the angle
costheta = Math.cos(rad);
sintheta = Math.sin(rad);

//create object reference
var el = document.getElementById(name);
if(el) {
//apply the filter
el.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";

//set up the properties
el.filters.item("DXImageTransform.Microsoft.Matrix").SizingMethod = "auto expand";
el.filters.item("DXImageTransform.Microsoft.Matrix").FilterType = "bilinear";

//apply the rotation matrix transformation
el.filters.item("DXImageTransform.Microsoft.Matrix").M11 = costheta;
el.filters.item("DXImageTransform.Microsoft.Matrix").M12 = -sintheta;
el.filters.item("DXImageTransform.Microsoft.Matrix").M21 = sintheta;
el.filters.item("DXImageTransform.Microsoft.Matrix").M22 = costheta;
resizechk();
}
}
var pi = Math.PI;
function degToRad(x) { return ( x/(360/(2*pi)) ); }
function radToDeg(x) { return ( x*(360/(2*pi)) ); }

function rotatleft(){
rotate('img', parseInt(-90));
document.body.scroll="auto";
}
function rotatright(){
rotate('img', parseInt(90));
document.body.scroll="auto";
}
function rotatnormal(){
rotate('img', parseInt(0));
document.body.scroll="no";
}
</SCRIPT>

<script language="javascript">
function resizechk(){
img.width = img.width+1;
img.width = img.width-1;
}
</script>

출처:http://www.koxo.com/lang/js/filter/Matrix.html

출처 소스를 변형한 스크립트임.

P.S.

스크립트의 제일 하단에 사이즈를 다시 체크하도록한 부분(resizechk()) 은,

기존의 matrix 스크립트가 불완전하여, 이미지가 회전한후 일부분이 잘리는 현상이 생김을 확인했으며,

이를 보완하기 위해, 이미지 사이즈를 다시 지정해주어, 윈도우 자체의 특성에 의해 이미지가 잘리지 않고 다시 출력되도록 보완해주는 부분이다.

위에 게재한 소스는, 엠파스 에디터가 onclick 명령을 omclick 로 자동변환하기 때문에 그대로 사용할 수 없다.

따라서, 첨부한 텍스트 파일의 원본 소스를 이용하십시오.

matrix.txt