2010年03月07日 00:51

JavaScriptを使って画像を回転させる方法

CSS3を使うと画像や任意の要素を回転して表示させることができる。それを使ってJavaScriptで画像をくるくる回転させられる。

以下のコードは、画像をクリックするごとに左上の位置を固定したまま90度ずつ回転させる例。

CSSで transform: rotate(90deg) を設定すると、90度回転して表示される。そのままだと画像の中心を軸に回転するので、左上の位置を変えずに回転するには軸の位置を画像サイズから計算して、CSSで transform-origin を指定する。img.attr("rotate", "2") は何度回転したかを保存するために一時的に使っているもので、CSSでもHTMLでもない。

ここで使っているCSS3のtransform は WebKit, Mozilla, Opera で先行実装されているので、-webkit-, -moz-, -o- を先頭に付ける。IEで動くかどうかは試していないがたぶん(まちがいなく)動かない。Firefox, Google Chrome, Opera で動作確認した。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
	$("img").click(function(){
		var img = $(this);
		var r = img.attr("rotate");
		var w = img.attr("width") / 2;
		var h = img.attr("height") / 2;
		if(r==1){
			img.css("-webkit-transform", "rotate(180deg)");
			img.css("-moz-transform", "rotate(180deg)");
			img.css("-o-transform", "rotate(180deg)");
			img.css("-webkit-transform-origin", w + "px " + h + "px");
			img.css("-moz-transform-origin", w + "px " + h + "px");
			img.css("-o-transform-origin", w + "px " + h + "px");
			img.attr("rotate", "2");
		} else if(r==2){
			img.css("-webkit-transform", "rotate(-90deg)");
			img.css("-moz-transform", "rotate(-90deg)");
			img.css("-o-transform", "rotate(-90deg)");
			img.css("-webkit-transform-origin", w + "px " + w + "px");
			img.css("-moz-transform-origin", w + "px " + w + "px");
			img.css("-o-transform-origin", w + "px " + w + "px");
			img.attr("rotate", "3");
		} else if(r==3){
			img.css("-webkit-transform", "rotate(0deg)");
			img.css("-moz-transform", "rotate(0deg)");
			img.css("-o-transform", "rotate(0deg)");
			img.attr("rotate", "0");
		} else {
			img.css("-webkit-transform", "rotate(90deg)");
			img.css("-moz-transform", "rotate(90deg)");
			img.css("-o-transform", "rotate(90deg)");
			img.css("-webkit-transform-origin", h + "px " + h + "px");
			img.css("-moz-transform-origin", h + "px " + h + "px");
			img.css("-o-transform-origin", h + "px " + h + "px");
			img.attr("rotate", "1");
		}
	});
});
</script>
</head>
<body>

<img src="test.jpg" />

</body>
</html>

このままだと、周辺のレイアウトを変更せずに単に画像を回転させるので、画像が正方形でない場合に、画像が回転した際に周辺と重なってしまう。

その問題に対応したのが以下。imgの外側にdivを囲んで、divのサイズを強制的に変更している。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
	$(".rotateimg").click(function(){
		var div = $(this);
		var img = $("img", this);
		var r = img.attr("rotate");
		var width = img.attr("width")
		var height = img.attr("height");
		var w = width / 2;
		var h = height / 2;
		if(r==1){
			img.css("-webkit-transform", "rotate(180deg)");
			img.css("-moz-transform", "rotate(180deg)");
			img.css("-o-transform", "rotate(180deg)");
			img.css("-webkit-transform-origin", w + "px " + h + "px");
			img.css("-moz-transform-origin", w + "px " + h + "px");
			img.css("-o-transform-origin", w + "px " + h + "px");
			img.attr("rotate", "2");
			div.width(width);
			div.height(height);
		} else if(r==2){
			img.css("-webkit-transform", "rotate(-90deg)");
			img.css("-moz-transform", "rotate(-90deg)");
			img.css("-o-transform", "rotate(-90deg)");
			img.css("-webkit-transform-origin", w + "px " + w + "px");
			img.css("-moz-transform-origin", w + "px " + w + "px");
			img.css("-o-transform-origin", w + "px " + w + "px");
			img.attr("rotate", "3");
			div.width(height);
			div.height(width);
		} else if(r==3){
			img.css("-webkit-transform", "rotate(0deg)");
			img.css("-moz-transform", "rotate(0deg)");
			img.css("-o-transform", "rotate(0deg)");
			img.attr("rotate", "0");
			div.width(width);
			div.height(height);
		} else {
			img.css("-webkit-transform", "rotate(90deg)");
			img.css("-moz-transform", "rotate(90deg)");
			img.css("-o-transform", "rotate(90deg)");
			img.css("-webkit-transform-origin", h + "px " + h + "px");
			img.css("-moz-transform-origin", h + "px " + h + "px");
			img.css("-o-transform-origin", h + "px " + h + "px");
			img.attr("rotate", "1");
			div.width(height);
			div.height(width);
		}
	});
});
</script>
</head>
<body>

<div class="rotateimg"><img src="test.jpg" /></div>
<br />
<div class="rotateimg"><img src="test2.jpg" /></div>

</body>
</html>
タグ:HTML javascript
カテゴリ:テック
2010/03/07 Sun 00:51 | Comment(0) | TrackBack(0) | テック | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。