画像を回転する

デジカメの画像とかを、画像処理することなく、ブラウザ上で回転できないかと思って検索してみたところ、

DXImageTransform.Microsoft.Matrix

というのが利用できそうな感じだ。
Microsoft、とあるのでIE専用なのはやむを得ない。

Matrix - filter,フィルタ

ここにはソースコードがサンプルとして掲載されている。しかし、このフィルタ、回転角の指定がtanθでやるらしい。すると、時計回りに90度回転したときはtanθってどうするんだ…。45度とかは簡単にできたが、やりたいのはデジカメ画像の90度、180度、270度回転なのだ。

Matrix

別サイトを発見。数値を入力してプレビューすることができる。
早速90度を試してみる。おお。


とりあえず、ここに先ほどのサイトで得られた結果を記述しておく。
tanθに無茶苦茶な数値が入っているがこの際、気にしないことにする。
これらをスタイルシートとして記述して、IMGタグに適用すると画像が回転できる。

.r90 {filter:progid:DXImageTransform.Microsoft.Matrix(
M11=6.123031769111886e-17,
M12=-1.0,
M21=1.0,
M22=6.123031769111886e-17,
Dx=1.0,
Dy=1.0,
FilterType='bilinear',
sizingMethod='auto expand'
);
}

.r180 {filter:progid:DXImageTransform.Microsoft.Matrix(
M11=-1.0,
M12=-1.2246063538223772e-16,
M21=1.2246063538223772e-16,
M22=-1.0,
Dx=1.0,
Dy=1.0,
FilterType='bilinear',
sizingMethod='auto expand'
);
}
.r270 {filter:progid:DXImageTransform.Microsoft.Matrix(
M11=-1.836909530733566e-16,
M12=1.0,
M21=-1.0,
M22=-1.836909530733566e-16,
Dx=1.0,
Dy=1.0,
FilterType='bilinear',
sizingMethod='auto expand'
);
}

実験結果はこちら。

Matrixフィルタで画像を回転

画像アップ掲示板などにボタンでそれぞれのフィルタを切り替えるようなJavaScriptを吐くようにしたり、登録された画像を誰かが回転したら、それを記録しておいて次の表示の際にデフォルトでそれを反映したら面白いのではないかと。

もっと簡単に回転できるフィルタを発見した。
画像を回転する(2)
ので、そちらを参照して欲しい。

About

2003年11月14日 10:25に投稿されたエントリーのページです。

ひとつ前の投稿は「きりしま」です。

次の投稿は「Proxomitron」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Powered by
Movable Type 3.35