投稿者 tel | 2013年4月5日

一時的なバッファを作らずに画像を90度回転する

画像を90度回転させるのに入力と出力が同じで、内部で一時的なバッファ画像を作らないで処理してみる。言葉にするとわかりづらいけど、やりたいことは

Rotate90(image);

みたいにすると image が回転される。しかも関数の中では画像を複製したり、余計な一時バッファをとったりしないようにする。y = x軸に対する鏡映変換をしてから、xまたはy軸に対する鏡映変換をする。鏡映変換の場合、ピクセルの入れ替えだけで済むので他にバッファを用意する必要はない。

右に90度回転させる変換行列は以下のようになる。

r90

y = x軸に対する鏡映変換行列は

ref_yx

x軸に対する鏡映変換行列は

ref_x

y = x軸の鏡映をしてからx軸の鏡映をすると90度回転した変換行列と一致する。

ret

同じようにして左に90度回転する場合は、y = x軸の鏡映をしてからy軸の鏡映をすると実現できる。コードにすると以下のようになる。

function rotate90R(image) {
    var data = indexData.data,
        w = image.width,
        h = image.height;

    for(var i = 1; i < h; i++) {
        var y = i * w;
        for(var j = i; j < w; j++) {
            var tmp = data[y + j];
            data[y + j] = data[j * w + i];
            data[j * w + i] = tmp;
        }
    }

	for(i = 0; i < h; i++) {
		y = i * w;
		var x = y + w - 1;
		for(j = 0; j < w / 2; j++) {
			tmp = data[y + j];
			data[y + j] = data[x - j];
			data[x - j] = tmp;
		}
	}
}

実際にCanvasで実装してみたサンプル
http://jsdo.it/sapphire_al2o3/f3vV


Responses

  1. […] 2次元の時と同様に要素の交換だけですむ鏡映変換を使う。(一時的なバッファを作らずに画像を90度回転する) […]


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。