자바스크립트로 이미지 로테이션(rotation)하기

간혹 누군가가 저장한 이미지가 90, 180도 로테이션 되어있는 경우가 있습니다.

서버에 해당 이미지를 저장시, 그 이미지가 로테이션되어있는지 알길이 없기 때문에

이를 정상적으로 되돌려서 볼수 있게 하는방법이 뭐가 있을까 하고 고민하던중에

자바스크립트로 처리하는 방법을 궁리해보았습니다.

그러던중에 다음의 플러그인을 발견했습니다.

http://wilq32.googlepages.com/wilq32.rollimage222

jquery 플러그인으로 만들어진 rotateImage 입니다. HTML5에서 정의된 canvas 엘리먼트를 이용한 방식입니다.

구현도 매우간단합니다. DOM으로 접근한뒤 .rotate(회전각도) 메소드를 이용하여 손쉽게 rotation을 구현할수 있습니다.

더 자세한 사용방법은 직접 웹페이지에 방문해보시면 됩니다.

$(document).ready(function()


		{


			var rot=$('#image3').rotate({maxAngle:25,minAngle:-55,


			bind:


				[


					{"mouseover":function(){rot.rotateAnimation(85);}},


					{"mouseout":function(){rot.rotateAnimation(-35);}}


				]


			});


		});

게다가 이와같이 rotateAnimation 메소드를 이용하여 애니메이션형식으로 움직이는 rotation 효과도 가능합니다.

이용시 한가지 주의할점은 IE6에서는 canvas 엘리먼트가 정상작동하지 않으므로 이 플러그인도 정상작동하지 않습니다.

IE에서는 별다른 예외처리를 직접해주셔야 합니다.