デジカメの画像とかを、画像処理することなく、ブラウザ上で回転できないかと思って検索してみたところ、
DXImageTransform.Microsoft.Matrix
というのが利用できそうな感じだ。
Microsoft、とあるのでIE専用なのはやむを得ない。
ここにはソースコードがサンプルとして掲載されている。しかし、このフィルタ、回転角の指定がtanθでやるらしい。すると、時計回りに90度回転したときはtanθってどうするんだ…。45度とかは簡単にできたが、やりたいのはデジカメ画像の90度、180度、270度回転なのだ。
別サイトを発見。数値を入力してプレビューすることができる。
早速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'
);
}
実験結果はこちら。
画像アップ掲示板などにボタンでそれぞれのフィルタを切り替えるようなJavaScriptを吐くようにしたり、登録された画像を誰かが回転したら、それを記録しておいて次の表示の際にデフォルトでそれを反映したら面白いのではないかと。
もっと簡単に回転できるフィルタを発見した。
画像を回転する(2)
ので、そちらを参照して欲しい。