web-dev-qa-db-ja.com

javascriptを使用して、div内で画像を時計回りまたは反時計回りに回転します

こんにちは、div内の画像を時計回りまたは反時計回りに回転させる方法はありますか?.

データベースからロードされた画像を含むメインの固定幅div [オーバーフローを非表示に設定]があります。 div内の画像を表示するためのスクロールバーがあります。画像をクリックすると、時計回りまたは反時計回りに回転するアニメーションを表示する必要があります。

マトリックスフィルターを使用して実行しました。フィルタを使用せずにIEでのみ実行できるかどうかを知りたいのですが、.

14
rahul

これを試してください: http://raphaeljs.com/image-rotation.html

キャンバスを使用しますが、IEもサポートします

15
Derek

JQueryを使用している場合、jQueryRotateは画像を回転させる小さな(3Kb未満の縮小+ gzip圧縮)プラグインです。

http://jqueryrotate.com/

IEでクライアント側で画像を回転させるために私が考えることができる唯一の方法は、フィルターを使用することです。やや最近のバージョンでは、他のブラウザーを使用できます <canvas>コントロール

別の方法は、サーバーサイドスクリプトを使用して画像を回転させることです。次に、JavaScriptを使用して画像を回転させる方法に関する情報を送信できます(つまり、/ rotate?image = img.jpg&amount = 90などの画像へのパスを生成します)

3
Blixt

CSS3はローテーションをサポートしています 、しかし 広くサポートされていません 。 JavaScriptの解決策を求めたように、 これが1つです ですが、滑らかな画像を取得できるとは思いません。

2
Michal M

フィルタなしで画像を回転させる方法は他にもあります/ html5 ..現実の世界では厄介で役に立たないですが、可能です。

Javascriptの場合、画像をピクセルの配列として保存できます。それを使用して回転を実行し、base64 datauriにエンコードする関数を記述します。bmpは簡単で、image.srcをそれに置き換えることができます。

古いブラウザでのファイルサイズとサポート、そしてもちろんひどいパフォーマンスについては、いくつかの制限があります。

1
user1954035